鼠标悬停在悬停元素上时如何设置悬停效果继续显示？答案

【问题标题】：How to set hover effect continue show when mouse over hover elements?鼠标悬停在悬停元素上时如何设置悬停效果继续显示？
【发布时间】：2016-06-15 03:54:43
【问题描述】：

我有两个具有不同 css 类的主要 div。当我将鼠标悬停在第一个 div 上时，我想显示第二个 div。悬停内容显示正常，但鼠标移动时悬停内容。该 div 会自动隐藏。

这是我的 html 内容：

<div class="cart_hover">XYZ</div>
<div id="header-cart" class="skip-content">
  <ul>
    <li>Home</li>
    <li>About Us</li>
    <li>Contact Us</li>
  </ul>
</div>

这是我的 CSS 类：

.cart_hover {

}
.show-content{
  display:block;
}
.skip-content {
  display:none;
}

这是我的 jQuery：

$(".cart_hover").hover(function(){
    $("#header-cart").addClass("show-content");
  }
);

【问题讨论】：

标签： javascript jquery html css hover

【解决方案1】：

Working fiddle

您可以使用toggleClass 在skip-content 和show-content 这两个类之间切换，因为skip-content 将覆盖display 的show-content：

$(".cart_hover").hover(function(){
    $("#header-cart").toggleClass("skip-content","show-content");
});

希望这会有所帮助。

【讨论】：

【解决方案2】：

尝试使用hover函数的以下签名，

var elem = $("#header-cart");
$(".cart_hover").hover(function(){
    elem.addClass("show-content");
  },function(){
    elem.removeClass("show-content");
  }
);

在您的代码中，您传递了hoverIn 处理程序，但没有传递hoverOut's。同样在 css 中，.show-content 类的特异性小于 .skip-content 的特异性。所以也增加它以使代码正常工作。

DEMO

【讨论】：

但我无法选择列表（悬停）元素
@BashkarJaved 为此，您必须修改您的 html。 jsfiddle.net/3o1e0q00/1

【解决方案3】：

hover() 方法指定当鼠标指针悬停在选定元素上时要运行的两个函数。

此方法同时触发 mouseenter 和 mouseleave 事件。

如果只指定了一个函数，那么 mouseenter 和 mouseleave 事件都会运行它。

由于您的要求是在 mouseenter 上显示 div 并且该 div 不应隐藏，因此您可以使用以下两个示例：

1) $(".cart_hover").mouseenter(function(){
$("#header-cart").css({"display" : 'block'});

});

2)$(".cart_hover").hover(function(){
$("#header-cart").css({"display" : 'block'});

} );

jsfiddle 代码：https://jsfiddle.net/mallik_jahir/3o1e0q00/2/

【讨论】：

【解决方案4】：

这很好用..

$(".cart_hover").hover(function(){
    $("#header-cart").toggleClass("skip-content","show-content");
});

【讨论】：

【解决方案5】：

上一个答案为您的 jQuery 提供了一个很好的解决方案。但是您是否考虑过完全的 CSS 实现？

.cart_hover:hover + #header-cart, #header-cart:hover{
    display:block;
}

只要 header-cart 直接出现在 cart_hover 之后，它就可以在不需要 jQuery 悬停的情况下工作。

【讨论】：

但我尝试了相同的 css 它也表现得像 jQuery 示例
我明白了 - 所以您希望标题车在停止悬停时保持可见？
是的，我想让标题车继续，但是当鼠标从标题车中移出时。所以 header-cart div 隐藏
我很困惑——这正是上面的 CSS 要做的。在 cart_hover 悬停时，会出现 header-cart。在 cart_hover 鼠标移出时，header-cart 将隐藏。
在 cart_hover 鼠标悬停在那里相同级别的 div(header-cart) 显示并且当我的鼠标光标从 cart_hover 移动到那个 div 时仍然打开div(header-cart)。当鼠标从 div(header-cart) 移出时，潜水隐藏。

【解决方案6】：

所以最终代码将是这样的，您可以将 xyz 用作按钮。甚至您可以使用 CSS3 过渡来使菜单流畅。

.cart_hover {
float:left;
background:#99CC00;
padding:10px;
}
.show-content{
  display:block;
}
.skip-content {
  display:none;
  float:left;
}

.cart_hover:hover + #header-cart, #header-cart:hover{
    display:block;
}

<div class="cart_hover">XYZ</div>
<div id="header-cart" class="skip-content">
  <ul>
    <li>Home</li>
    <li>About Us</li>
    <li>Contact Us</li>
  </ul>
</div>

这里的“#header-cart:hover”帮助代码在第二部分悬停期间显示菜单。

【讨论】：