Essentially, the problem I'm having is that when I set the display to none in the CSS sheet for the button class, it then disables my ability to mouseover it in JQuery. I tested this with alert() quite a few times.
JQuery code:
$(document).ready(function() { $('.button').hide(); $('.button').mousemove(function() { $('.button').show(); }); });
HTML:
<!-- art gallery --> <HTML lang="en"> <HEAD> <meta charset="utf-8" \> <title>Gallery</title> <link rel="stylesheet" href="gallery_stylesheet.css"> </HEAD> <BODY> <div id="wrapper"> <div id="prev_button" class="button"> </div> <div id="picture"> </div> <div id="next_button" class="button"> </div> </div> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/gallery.js"></script> </BODY> </HTML>
CSS:
#wrapper { height: 90%; width: 90%; border: 3px solid black; border-style: outset; margin: 10px 5%; } #next_button { float: right; } #prev_button { float: left; } .button { border: 1px solid blue; width: 125px; height: 100%; background: blue; }
This post has been edited by Crowz: 07 October 2012 - 05:30 PM