javascript - 如果hasClass然后触发mouseover mouseout

我正在尝试将div具有类sticky的鼠标悬停或悬停功能添加到div中。因此，当导航器处于粘性状态时，homepage-sidemenu应该会得到display:none;。当您将鼠标悬停在.homepage-sidemenu.sticky上时，该图标将变为可见；当鼠标移出时，该图标将不可见。

我以为这就像添加一个悬停函数一样简单，但是由于某种原因我没有做我想做的事情，所以我错过了一些东西。粘性类添加了滚动功能。

fiddle here演示发生的情况

所以我有这个：

<div id="nav">
 <ul class="menu">
  <li class="highlight"><a href="">categories</a></li>
 </ul>
</div>

<div id="content">
 <div class="homepage-sidemenu">
  <ul>
   <li class="highlight">...</li>
  </ul>
 </div>
</div>

var fixmeTop1 = $('#nav').offset().top;
var fixmeTop = $('.homepage-sidemenu').offset().top + 100;
$(window).scroll(function () {
    var currentScroll = $(window).scrollTop();
    if (currentScroll >= fixmeTop1) {
        $('#nav').addClass("sticky");
    } else {
        $('#nav').removeClass("sticky");
    }
    if (currentScroll >= fixmeTop) {
        $('.homepage-sidemenu').addClass("sticky");
    } else {
        $('.homepage-sidemenu').removeClass("sticky");
    }

});

$('#nav.sticky .menu li.highlight').mouseover(function () {
    if ($('.homepage-sidemenu').hasClass('sticky')) {
        $('.homepage-sidemenu.sticky').css('display', 'block');
    }
});

需要发生的是，当主导航固定时/向下滚动时，菜单消失。悬停类别链接时，它应该变得可见。

我尝试了各种功能（悬停，鼠标输入，单击等）来完成此任务，但是没有运气。修复导航后，似乎缺少了某些东西。

有人可以指出我的方向或告诉我我在做什么错吗？

最佳答案

您需要使用事件委托来附加鼠标悬停事件，或仅将事件附加到#nav而不是＃nav.sticky。然后，您可以像处理homepage-sidemenu一样在事件内部进行过滤。您正在尝试在#nav具有粘性类之前进行绑定，因此它将无法正常工作。