鼠标悬停/鼠标移出、鼠标进入/鼠标离开、悬停闪烁问题

Question

我有一个 div，里面有一个图像。当我将鼠标悬停在图像上时，我会创建一个工具提示 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>