Question

I have made a small dropdown menu with jQuery and have binded the “show” and “hide” animation on the mouseover/mouseout events. The problem is that when I hover the mouse on the menu list item(s) in my dropdown, the events are trigged and my menu disappears!

I have also tried stopPropagation() which also failed:

$('nav>div.dropTrigger').mouseover(function(e)
{
    console.log("enter");
    $(this).find('div').stop(true,true).animate({ opacity: 'show', height: 'show' },"fast");        
}); 

$('nav>div.dropTrigger').mouseout(function(e)
{   
    console.log("out");
    $(this).find('div').stop(true,true).animate({ opacity: 'hide', height: 'hide' },"fast");        
});

$('.dropdown').mouseover(function(e)
{
    e.stopPropagation();
});

$('.dropdown').mouseout(function(e)
{
    e.stopPropagation();
});

My markup:

<nav>
   <div class="dropTrigger">
      <a href="potatoes">some menu</a>
       <div class="dropdown">
          <ul>[drop menu goes here]
       </div>
 ...

Answer 1

$('nav>div.dropTrigger').on({
            mouseenter : function(){ 
                 console.log("enter");
                 $(this).find('div').stop(true,true).animate({ opacity: 'show', height: 'show' },"fast");
            },
            mouseleave : function(){ 
                console.log("out");
                $(this).find('div').stop(true,true).animate({ opacity: 'hide', height: 'hide' },"fast"); 
            }
        });

Bind events to mouseenter and mouseleave instead. They’re ‘magical’ jquery events that attend to the problem your describing. Also – the preferred binding method now is via $.on() (since jq 1.7)