I'm trying to create rollover buttons in Dreamweaver with Jquery. I've been practicing/testing this on my test site. http://test237.com/slidetest2.html I've been encountering two main problems. 1. I want the mountain to slide up behind the button. 2. The mountain starts in the up position. I want it to start down. My code is... <head> <title>Untitled Document</title> <script src="scripts/jquery-2.0.1.min.js" script type="text/javascript"> </script> <script> $(document).ready(function(){ $(".slide").hover(function(){ $(this).find("div.snipit").slideDown("slow"); },function(){ $(this).find("div.snipit").slideUp("slow"); }); }); </script> <style> div.slide { width: 468px; heithg: 399px; float: left; position: relative; } div.slide div { width: 468px; height: 399pxx: display: none; position: absolute; bottom: 0px; bottom: 4px; left:0px; } </style> </head> <body> <div class="slide"> <img src="images2/home2.png" /> <div class="snipit"> <img src="images2/mountain2.png" /> </div> </body> </html> Code (markup): If anyone can help me out I'd really appreciate it. I'm new to Jquery but learning fast. This task has been driving me nuts.
The jQuery you have written is fine. The problem is coming from the CSS. I've added position relative to both images and set the z-index values so the mountain is behind the home button. I have added inline styles you can change those to the actual style sheet if you wish. Please see the code below which fixes your problem. <html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Untitled Document</title> <script src="scripts/jquery-2.0.1.min.js" script="" type="text/javascript"> </script><style type="text/css"></style> <script> $(document).ready(function(){ $(".slide").hover(function(){ $(this).find("div.snipit").slideDown("slow"); },function(){ $(this).find("div.snipit").slideUp("slow"); }); }); </script> <style> div.slide { width: 468px; heithg: 399px; float: left; position: relative; } div.slide div { width: 468px; height: 399pxx: display: none; position: absolute; bottom: 0px; bottom: 4px; left:0px; } </style> </head> <body style=""> <div class="slide"> <img src="images2/home2.png" style=" position: relative; z-index: 2; "> <div class="snipit" style="display:none;"> <img src="images2/mountain2.png" style=" position: relative; z-index: 1; "> </div> </div></body></html> Code (markup):