鼠标悬停/鼠标移出，鼠标输入/鼠标离开，悬停闪烁问题

Question

我有一个包含图像的div。当我悬停图像时，我创建了一个工具提示div，它绝对定位在图像的一部分上(绝对位置很重要)。它包含标题和alt文本。

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

这就是闪烁的问题。

有一堆关于闪烁问题的帖子，我已经尝试了很多解决方案，但都没有奏效。我尝试过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>