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上，则图像下方的文字应更改为＆＃34; Some Text＆＃34;到＆＃34;一些按钮＆＃34;。

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

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

修改

好的，我太蠢了。

问题是，如果我切换段落，该段落将被隐藏。现在div不再是这个高度了，所以我把div留了几微秒。但之后显示第二段，卡片div高度成为旧的高度。因此，悬停事件再次被触发。

现在我们有一个无限循环：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上

2 个答案: