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

Question

我有两个主要 div，它们有不同的 css class。当我悬停在第一个 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 classes:

.cart_hover {

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

这是我的 jQuery:

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

Answer 1

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

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

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

DEMO

Answer 2

Working fiddle

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

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

希望对您有所帮助。

Answer 3

之前的回答很好的解决了你的jQuery。但是您是否考虑过完全 CSS 实施？

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

只要 header-cart 直接出现在 cart_hover 之后，这就可以工作，而不需要 jQuery 悬停。

Answer 4

当鼠标指针悬停在所选元素上时，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/

Answer 5

这很好..

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

Answer 6

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

.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”帮助代码在第二部分悬停期间显示菜单。

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

How to set hover effect continue show when mouse over hover elements?

html

javascript

css

jquery

hover

DEMO