Question

我有一个带有图像的div。当我将鼠标悬停在图像上时，我会创建一个工具提示div，它绝对位于图像的一部分上（绝对位置很重要）。它包含标题和替代文字。

这一切都很好，直到您将鼠标悬停在工具提示框中。它没有气泡下来，它认为我不再盘旋在图像上，从而使工具提示盒消失。然后它注册我再次盘旋图像，它在显示工具提示框和隐藏它之间来回移动。

因此闪烁的问题。

关于闪烁的问题，有很多关于SO的帖子，我尝试了很多解决方案，但没有一个有效。我尝试过Mouseover / mouseout，mouseenter / mouseleave，悬停，甚至将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>

鼠标悬停/ mouseout，mouseenter / mouseleave，悬停闪烁问题

1 个答案: