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

I have two main divs that have different css class. I want to show second div when i hover on first div. Hover content showing fine but when mouse move hovered content. that div hide automatically.

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

Here is my html content:

这是我的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>

Here is my CSS classes:

这是我的CSS课程：

.cart_hover {

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

And Here is my jQuery:

这是我的jQuery：

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

6 个解决方案

#1

Working fiddle

工作小提琴

You could use toggleClass to toggle between the both classes skip-content and show-content because skip-content will override the display of show-content :

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

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

Hope this helps.

希望这可以帮助。

#2

Try to use the following signature of hover function,

尝试使用以下悬停功能的签名，

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

In your code, you have passed the hoverIn handler but not the hoverOut's. Also in css, the specificity for the class .show-content is lesser than the specificity of .skip-content. So increase it also to make the code working.

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

DEMO

#3

The hover() method specifies two functions to run when the mouse pointer hovers over the selected elements.

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

This method triggers both the mouseenter and mouseleave events.

此方法触发mouseenter和mouseleave事件。

If only one function is specified, it will be run for both the mouseenter and mouseleave events.

如果只指定了一个函数，则将同时为mouseenter和mouseleave事件运行该函数。

As your requirement is to display the div on mouseenter and that div should not hide then you can use following two example:

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

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

});

}）;

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

} );

}）;

jsfiddle code : https://jsfiddle.net/mallik_jahir/3o1e0q00/2/

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

#4

This works fine..

这工作正常..

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

#5

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

前面的答案为您的jQuery提供了一个很好的解决方案。但你考虑过完全的CSS实现吗？

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

只要header-cart直接在cart_hover之后出现，这将无需jQuery悬停即可使用。

#6

So Final code will be like this and you can use xyz as a button. Even you can use the CSS3 Transitions to make the menu smoothly.

因此，最终代码将是这样的，您可以使用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>

Here "#header-cart:hover " helping the code to showing the menu during the second section hover.

这里“＃header-cart：hover”帮助代码在第二部分悬停时显示菜单。