Geek Answers Handbook

Show, hide div with mouse, mouse

I want to create a simple drop-down menu with a div, but I have this problem: when the div goes above my button, it’s very good, but when the mouse leaves the field of my link (in this case show / hide text) my div is hidden. How can I change the hidden area button? because in my files I cannot select the links in the 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(); }); });
+7
source share
2 answers

You need to wrap the link and div in the same container and then bind this event.

 <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 than expecting a show_hide event, bind it to the class wrapper.

+5
source

In addition to @roacher's answer, you also need to crop the div wrapper tightly on the image by setting the width.

You can also replace pairing mouseover / mouseout with hover

And finally, I'm not sure if you want to set the sliding height of the div to less (60 pixels) than the image (80px)?

jsFiddle here

+2
source

More articles:


All Articles