淡出鼠标，而不是悬停

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(); 
    }); 
​});