Question

我有两个主要的div，它们有不同的css类。当我悬停在第一个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");
  }
);

Answer 1

尝试使用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

Answer 2

<强> Working fiddle

您可以使用toggleClass在两个类skip-content和show-content之间切换，因为skip-content会覆盖display的{{1}}：< / p>

show-content

希望这有帮助。

Answer 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/

Answer 4

这很好..

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

Answer 5

The previous answer provides a good solution to your jQuery. But have you considered a fully CSS implementation?

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

So long as header-cart comes directly after cart_hover, this will work without the need for a jQuery hover.

Answer 6

所以最终代码将是这样的，你可以使用xyz作为按钮。即使你可以使用CSS3 Transitions来平滑地制作菜单。

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

这里＆＃34;＃header-cart：hover＆＃34;帮助代码在第二部分悬停期间显示菜单。

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

6 个答案:

DEMO