淡出鼠標，而不是懸停

Question

我有一個菜單，我試圖讓子菜單在mouseover上淡出，並在mouseleave上淡出。我嘗試了幾種解決方案，其中大多數解決方案導致菜單在懸停時立即消失，而不是在mouseleave/mouseout上。 下面的代碼是我認爲最有意義的代碼。但結果是菜單淡入，但不淡出。

<script type="text/javascript"> 
$(document).ready(function(){ 

     //When hovering a top-level link, submenu fadein. 
     $('.toppunkt a').mouseenter(function(){ 
     $('ul.sub-menu').fadeIn(); 
     }); 

     //When leaving the submenu, fadeout. 
     $('.ul.sub-menu').mouseleave(function(){ 
     $('ul.sub-menu').fadeOut(); 
     }); 
}); 
</script> 

Answer 1

這可能會或可能不會幫助你，但你似乎是在檢查的鼠標離開錯誤的項目...

http://jsfiddle.net/Mutmatt/3ppr8/14/

更妙的是，你可能想這個菜單系統的方式的行爲是這樣的jsfiddle：

http://jsfiddle.net/Mutmatt/3ppr8/23/

看看那一個。不要忘記以供將來參考

代碼標記正確答案： JS：

jQuery(document).ready(function() { 
    jQuery('#topmenu li').hover(
     //When hovering a top-level link, submenu fadein. 
     function() { 
      jQuery('ul', this).stop().fadeIn(); 
     }, 
     //When leaving the submenu, fadeout. 
     function() { 
      jQuery('ul', this).stop().fadeOut(); 
     } 
    ); 
});​ 

HTML： ''

<ul id="topmenu"> 
    <li><a href="yep">yep</a> 
     <ul class="sub-menu" style="display: none;"> 
      <li><a href="derp">derp</a></li> 
      <li><a href="yerp">yerp</a></li> 
     </ul> 
    </li> 
</ul>​ 

Answer 2

可能是多餘的在獲取鼠標離開功能中的子菜單。 我寫了一個使用div的解決方案。

這裏是小提琴： http://jsfiddle.net/PAWQr/12/

希望這有助於。

HTML：

<div class="toppunkt"> 
    <a href="" action="">Here is a list</a> 
    <div class="sub-menu" style="width:70px; border: 1px dotted gray; display: none;">  
     <ul> 
      <li>Option1</i> 
      <li>Option2</i> 
     </ul> 
    </div>  
</div> 

腳本：

$(document).ready(function(){ 

    //When hovering a top-level link, submenu fadein. 
    $('.toppunkt a').mouseenter(function(){ 
     //alert('mouse enter'); 
     $('.sub-menu').fadeIn(); 
    }); 

    //When leaving the submenu, fadeout. 
    $('.sub-menu').mouseleave(function(){ 
     $('.sub-menu').fadeOut(); 
    }); 
​});