鼠标悬停/鼠标离开，鼠标进入/鼠标离开，鼠标悬停闪烁问题

Mouseover/mouseout, mouseenter/mouseleave, hover flickering issue

本文关键字：鼠标 离开 悬停 问题 闪烁      更新时间：2023-09-26

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

这一切都很好，直到你把工具提示框悬停。它不会向下冒泡，它认为我不再悬停在图像上，从而使工具提示框消失。然后它就注册了，我又把图像悬停了它在显示工具提示框和隐藏它之间来回切换

因此闪烁的问题。

在SO上有一堆关于闪烁问题的帖子，我尝试了很多解决方案，但没有一个有效。我尝试过鼠标悬停/鼠标离开，鼠标进入/鼠标离开，悬停，甚至将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();
});

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

, 

<div id="mouseoverdiv">
<div class="tooltip">some text</div>
<img src="" />
</div>
相关文章：