jQuery懸停和鼠標移出下拉菜單

Question

我試圖創建一個簡單的子導航下拉菜單。當用戶將鼠標懸停在觸發器上時，＃子導航會使用下拉菜單淡入，然後當用戶移開鼠標時，它將淡出。這確實發生了，但是當鼠標移過嵌套的li時，它會再次消失，我不知道爲什麼？

<ul id="sub-nav"> 
    <li class="sub sub-profile"><a href="#">Your Profile</a></li> 
    <li class="sub sub-upgrade"><a href="#">Upgrade</a></li> 
    <li class="sub sub-signout"><a class="last" href="#">Sign Out</a></li> 
</ul> 

$('#header-user a').hover(function() { 
     $('#sub-nav').fadeIn('400'); 
    }); 

    $('#sub-nav').mouseout(function(){ 
     $('#sub-nav').fadeOut('400'); 
    }); 

任何幫助，將不勝感激，傑克。

Answer 1

試試這個，希望這將有助於

$('#header-user a').mouseout(function(){ 
    $('#sub-nav').fadeOut('400'); 
}); 

你也可以試試：

$("#header-user a").hover(
    function() { 
     $('#sub-nav').fadeIn('400'); 
    }, 
    function() { 
     $('#sub-nav').fadeOut('400'); 
    } 
); 

OR

$("#header-user a").on('mouseenter',function(){ 
    $('#sub-nav').fadeIn('400'); 
}); 
$("#header-user a").on('mouseleave',function(){ 
    $('#sub-nav').fadeOut('400'); 
});