鼠标移出时淡出，而不是悬停时答案

【问题标题】：Fade-out on mouseout, not on hover鼠标移出时淡出，而不是悬停时
【发布时间】：2012-09-25 07:19:04
【问题描述】：

我有一个菜单，我试图让子菜单在鼠标悬停时淡入，并在鼠标离开时淡出。我尝试了几种解决方案，其中大多数导致菜单在悬停时立即消失，而不是在 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>

【问题讨论】：

请务必选择“正确”的答案，否则您的问题将来可能会无人回答

标签： hover fadeout mouseout

【解决方案1】：

这可能对您有帮助也可能没有帮助，但您似乎在 mouseleave 上检查了错误的项目...

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>

【讨论】：

【解决方案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();
  });
});

【讨论】：