show,hide DIV with mouseover , mouseout
css, html, javascript, jquery
Solution
You need to wrap the link and the div into the same container,then bind the event there.
<div class="wrapper">
<a href="#" class="show_hide">Show/hide</a><br />
<div class="slidingDiv" style="width:103px;height:60px;">
<img alt="" height="80" src="images/dropdown.png" width="103">
</div>
</div>
Then,rather then biding the event to show_hide, bind it to the class 'wrapper'.
Problem
i want to create a simple dropdown menu with div but i have this problem: when goes over my button div show pretty good but when mouse goes out from my link field (in this case show/hide text) my div goes to hide . how can i change my hide area button ? because in my files i cant select links in dropdown div. HTML code: ``` <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Papermashup.com | Sliding Div</title> <script src="jquery.js" type="text/javascript"></script> <script src="dropdown/drop.js" type="text/javascript"></script> <link type="text/css" href="dropdown/drop.css" rel="stylesheet"/> </head> <body> <a href="#" class="show_hide">Show/hide</a><br /> <div class="slidingDiv" style="width:103px;height:60px;"> <img alt="" height="80" src="images/dropdown.png" width="103"> </div> </body> </html> ``` CSS code: ``` .show_hide { display:none; } ``` JavaScript code: ``` $(document).ready(function(){ $(".slidingDiv").hide(); $(".show_hide").show(); $('.show_hide').mouseover(function(){ $(".slidingDiv").slideToggle(); }); $('.show_hide').mouseout(function(){ $(".slidingDiv").slideToggle(); }); }); ```