jQuery hide div on mouseout

Question

I saw a lot of posts on this item, but couldn\'t find the right solution. Sorry if it\'s already answered somewhere.

What I want: I have a DIV

Answer 1

Edit: Sorry misread the question the first time. I had to do this a couple of times, and I always moved the menu a pixel up so that it would overlap the href element. And then show/hide the menu if the href OR href elements are being hovered.

$("#menu_opener, #menudiv").hover(
    function(){
        $("#menudiv").show();
    },
    function(){
        $("#menudiv").hide();
    }
);

And set the top property for the menudiv's style so it moves up and is overlapping the href.

<div>
    <a href="#" id="menu_opener">Menu</a>
</div>
<div id="menudiv" style="position: fixed; top: -1px; background-color: white; display: none;">
    <a href="#" id="A1">Page 1</a><br />
    <a href="#" id="A2">Page 2</a><br /> 
    <a href="#" id="A3">Page 3</a><br />                           
</div>

Answer 2

if i understand the "is not above the href element" piece, you want the menu to stay visible when mousing off of div#menudiv, but still moused over a#menu_opener ??

if that's the case, i'd wrap the entire thing in a unqiue div and target that. and use mouseleave over mouseout.

http://api.jquery.com/mouseleave/

so, your HTML becomes:

<div id="menu_container">
  <div>
    <a href="#" id="menu_opener">Menu</a>
  </div>
  <div id="menudiv" style="position: fixed; background-color: white; display: none;">
    <a href="#" id="A1">Page 1</a><br />
    <a href="#" id="A2">Page 2</a><br /> 
    <a href="#" id="A3">Page 3</a><br />                           
  </div>
</div>

and your script would be something like:

$("#menu_opener").click(function () {
  if ($("#menudiv").is(":hidden")) {
      $("#menudiv").slideDown("slow");
  } else {
      $("#menudiv").hide();
  }
});
$("#menu_container").mouseleave(function(){
    $('#menudiv').hide();
});

Answer 3

You can keep the HTML as is and simply add the following:

$("#menudiv").mouseleave(function(){
    $(this).hide();
});

jsFiddle: http://jsfiddle.net/5SSDz/