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 上，图片下方的文字应该从 "Some Text" 变为 "Some Buttons"。

好的，如果我将鼠标悬停在图像上，它会起作用，但如果我向下移动一些像素（到段落），则会再次触发悬停事件并再次切换文本。

我的问题是：为什么会再次触发悬停事件，我该如何防止这种情况？

编辑：

好吧，我太笨了

问题是，如果我切换段落，该段落就会被隐藏。现在 div 不再是那个高度，所以我将 div 保留几微秒。但是之后显示第二段，并且 cards-div 高度变为旧高度。于是hover事件又被触发了

现在我们有一个无限循环:D

Answer 1

您需要使用 mouseenter, mouseover 是一个冒泡事件，当您从一个后代切换到另一个后代时将被触发。

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

演示：Fiddle

如果你也想切换回来，那么使用 hover() 方法

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

演示：Fiddle

请参见 this fiddle，您可以了解后代元素如何触发鼠标悬停

Answer 2

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

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

JSFiddle Demo

JQuery 将鼠标悬停在完成 div

JQuery hover over complete div

javascript

jquery

hover