Mouseover/mouseout、mouseenter/mouseleave、hover 闪烁问题

Question

我有一个 div，里面有一张图片。当我悬停图像时，我创建了一个绝对定位在图像的一部分上的工具提示 div（绝对位置很重要）。它包含标题和替代文本。

这一切都很好，直到您将鼠标悬停在工具提示框上。它不会冒泡，它认为我不再将鼠标悬停在图像上，从而使工具提示框消失。但随后它注册我再次悬停图像，它在显示工具提示框和隐藏它之间来回切换。

因此闪烁问题。

在 SO 上有很多关于闪烁问题的帖子，我尝试了很多解决方案，但都没有奏效。我尝试过 Mouseover/mouseout、mouseenter/mouseleave、hover，甚至将 live() 与它们结合使用。我什至从从头开始创建工具提示切换到在那里有空的 div，这样当页面加载时它会在 DOM 中，以防出现问题。我真的不知道该怎么办了。这是我目前的代码。

$("img").bind("mouseover", function() {
    var pimg = $(this);
    var position = pimg.position();
    var top = position.top;
    var left = position.left;
    var title = $(this).attr('title');
    var alt = $(this).attr('alt');
    $('.toolTip').css({'left' : left, 'top' : top, 'width' : width}).append('<div><h3>' + title + '</h3><p>' + alt + '</p></div>');
});

$("img").bind("mouseout", function() {
    $('.toolTip').empty();
});

Answer 1

问题是 a) 您需要使用 mouseenter / mouseleave 和 b) 工具提示 div 需要存在于具有 mouseenter / mouseleave 侦听器的元素内。

例如：

<div id="mouseoverdiv">
<div class="tooltip">some text</div>
<img src="" />
</div>