Question

我正在尝试创建一个简单的子导航下拉菜单。当用户将鼠标悬停在触发器上时，＃sub-nav将使用下拉菜单淡入，然后当用户将鼠标移开时，它将淡出。这确实发生了，但是当鼠标在嵌套的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');
});

jQuery悬停和mouseout下拉菜单

1 个答案: