jQuery將鼠標懸停在完整的div上

Question

我有以下html代碼：

<div class="card">
    <img src="test.jpg" />
    <p class="alt-text">Some Text</p>
    <p class="actions" style="display: none;">Some Buttons</p>
</div>

和下面的JS代碼

$(".card").on("mouseover", function(){
    var $t = $(this);
    $t.find(".actions").toggle();
    $t.find(".alt-text").toggle();
});

如果我將鼠標懸停在Card-Div上，則圖像下方的文本應從“某些文本”更改為“某些按鈕”。

好的，如果我將鼠標懸停在圖像上，它可以工作，但是如果我向下移動一些像素（到該段落），則將再次觸發懸停事件，並且文本將再次切換。

我的問題是：為什么再次觸發懸停事件，如何防止這種情況發生？

編輯：

好吧，我很傻。

問題是，如果我切換段落，該段落將被隱藏。 現在div不再那么高了，所以我離開div幾微秒。 但是之后顯示了第二段，並且card-div高度變為舊高度。 因此，懸停事件再次被觸發。

現在我們有一個無限循環：D

Answer 1

您需要使用mouseenter ， mouseover是一個冒泡事件，當您從一個后代轉換為另一個后代時，將觸發該事件。

$(".card").on("mouseenter", function(){
    var $t = $(this);
    $t.find(".actions").toggle();
    $t.find(".alt-text").toggle();
});

演示： 小提琴

---

如果還要切換回去，請使用hover（）方法

$(".card").hover(function (e) {
    var $t = $(this);
    $t.find(".actions").toggle(e.type == 'mouseenter');
    $t.find(".alt-text").toggle(e.type == 'mouseleave');
});

演示： 小提琴

看到這個小提琴 ，您可以看到后代元素如何觸發鼠標懸停

Answer 2

您可以如下所示使用hover事件

$(function(){
 $(".card").on("hover", function(){
    var $t = $(this);
    $t.find(".actions").toggle();
    $t.find(".alt-text").toggle();
 });
});

JSFiddle演示