Question

我正在尝试将鼠标悬停或悬停功能添加到具有类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');
    }
});

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

我尝试了各种功能（悬停，鼠标中心，点击等）来完成这项工作，但没有运气。导航修复后看起来有些东西丢失了。

有人可以指点我某些方向或告诉我我做错了吗？！

Answer 1

您需要使用事件委派来附加鼠标悬停事件，或者只是将事件附加到#nav而不是＃nav.sticky。然后，您可以像使用主页侧菜单一样过滤活动内部。您在#nav拥有粘性类之前尝试进行绑定，因此它无法正常工作。

Answer 2

试试这个：这可能对你有帮助。

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

Answer 3

好的，在两个答案的帮助下，我找到了解决方案。切换css display不是正确的方法。更好的是使用addClass并在那里添加你的CSS。

所以：

$('#nav .menu li.highlight').hover(function() {
        if ( $('.homepage-sidemenu').hasClass('sticky') ) {
           //$('.homepage-sidemenu.sticky').css('display','block');
            $('.homepage-sidemenu.sticky').addClass('active');
        }
    },
    function(){
        if ( $('.homepage-sidemenu').hasClass('sticky') ) {
            //$('.homepage-sidemenu.sticky').css('display','none');
            $('.homepage-sidemenu.sticky').removeClass('active');
        }
    }
);

和CSS

.homepage-sidemenu.sticky{
  display:none;
}
.homepage-sidemenu.sticky.active{
  display:block;
}

<强> Working fiddle

如果hasClass然后触发mouseover mouseout

3 个答案: