當鼠標懸停在懸停元素上時，如何設置懸停效果繼續顯示？

Question

我有兩個具有不同的CSS類的主要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

工作提琴

你可以使用toggleClass到這兩個類之間切換skip-content和show-content ，因為skip-content將覆蓋display的show-content ：

$(".cart_hover").hover(function(){
    $("#header-cart").toggleClass("skip-content","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

前面的答案為您的jQuery提供了一個很好的解決方案。 但是您是否考慮過完整的CSS實現？

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

只要header-cart直接在cart_hover之后，它就可以工作而無需jQuery懸停。

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”幫助代碼在第二部分懸停時顯示菜單。