如果 hasClass 则触发 mouseover mouseout答案

【问题标题】：If hasClass then fire mouseover mouseout如果 hasClass 则触发 mouseover mouseout
【发布时间】：2015-05-14 12:18:24
【问题描述】：

当 div 具有 sticky 类时，我正在尝试向其添加鼠标悬停或悬停功能。所以当导航很粘时，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');
    }
});

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

我尝试了各种功能（悬停、鼠标输入、单击等）来完成这项工作，但没有成功。修复导航后，似乎缺少某些东西。

谁能指点我一些方向或告诉我我做错了什么？！

【问题讨论】：

试过直接的 CSS 吗？
在导航栏中添加和删除粘性类时尝试切换（隐藏/显示）侧边菜单
@EvanKnowles: Yes offcourse :) 然后出现的问题是sidemenu首先设置为display：none，然后以某种方式需要在悬停时显示/隐藏。我认为这不能用纯 CSS 完成，因为侧边菜单位于悬停的 div 之外。
对于您的信息，在您的情况下，您必须委托事件，例如：$(document).on('mouseover', '#nav.sticky .menu li.highlight', function() {...}); 就是说，最好只使用 CSS 解决方案。编辑：就像你说的，如果不重写 HTML 标记，就不能只使用 CSS 解决方案

标签： javascript jquery html css

【解决方案1】：

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

【讨论】：

好吧，有道理...你有例子吗？
试过了！唯一发生的事情是，当导航不粘时，侧边菜单在返回时仍然消失！请查看我更新的fiddle

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

【讨论】：

mouseover 不接受两个处理程序（与hover 方法不同），无论如何，在您绑定事件时没有元素#nav.sticky（在就绪处理程序中）
但是，您不能委托它（至少以简单的方式）。您可以改用 '#nav .menu li.highlight' 作为选择器，然后查看行为：jsfiddle.net/g4m7hgov/3
@Maverick：您的解决方案是朝着正确的方向推进，除了菜单在返回时消失！查看更新的fiddle

【解决方案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

【讨论】：