Question

I feel like this question must have been asked before but I must not know the correct terminology to find an answer to it.

I have a transparent div that acts as a hit area. When the user hovers over this area a menu bar animates on to the screen. The problem is if the cursor moves on to this menu the animation to hide the menu begins. It doesn’t sense that the cursor is over it. I can fix this by making the z-index of the hit area higher than the menu but then the menu buttons are not click-able.

Here’s my code. Any ideas?

http://jsfiddle.net/92dYt/1/

CSS

#menu{
  position:fixed;
  top:-40px;
  left:0px;
  width:100%;
  height:40px;
  background-color:#000;
  z-index:50;
}​
#hitarea{
  position:fixed;
  top:0px;
  left:0px;
  width:100%;
  height:150px;
  background-color:#eee;
  z-index:49;
  opacity:0;
}

HTML

<div id="menu"></div>
<div id="hitarea"></div>

JAVASCRIPT

$("#hitarea").hover(
    function () {
        $('#menu').delay(500).animate({
            top: 0
          }, 500, function() {
            // Animation complete.

        }); 
    }, 
  function () {
    $('#menu').delay(500).animate({
        top: -40
      }, 500, function() {
        // Animation complete.

    }); 
  }
);

Answer 1

You may want to nest the hit area as a background in the menu and code your own hover behaviour using mouseenter instead of hover.

http://api.jquery.com/mouseenter/

You can see from the example that mouseover fires for every child object while mouseenter fires just once. (Although if nested, the solution might work with hover too.)