mouseenter/mouseout 使 div 闪烁答案

【问题标题】：mouseenter/mouseout makes div flickermouseenter/mouseout 使 div 闪烁
【发布时间】：2012-08-02 09:17:09
【问题描述】：

我有一个在 mouseenter 事件上显示并在 mouseout 事件上隐藏的工具提示。有时，并非总是如此，当鼠标在工具提示的图像内移动时，工具提示会闪烁。我怎样才能防止这种情况发生？有没有更好的方法来做到这一点？

这是我的代码：

$('#home_pic').mouseenter(function() {
    $('#home_tip').show();
});
$('#home_pic').mouseout(function() {
    $('#home_tip').hide();
});

【问题讨论】：

标签： javascript jquery tooltip mouseenter mouseout

【解决方案1】：

使用 mouseleave 代替 mouseout()

$('#home_pic').mouseleave(function() {
    $('#home_tip').hide();
});

或者使用 .hover

 $('#home_pic').hover(function() {
        $('#home_tip').hide();
    },function() {
        $('#home_tip').show();
    });

【讨论】：

我刚刚注意到 Ankit！我当时想，“一般来说，+1 评论不是伴随着 +1 投票吗？”还值得注意的是，.hover 只是调用了 mouseenter 和 mouseleave。
我知道 hover 会调用 mouseenter 并离开，但它会减少代码大小

【解决方案2】：

您可以为此使用toggle() 函数，它接受一个布尔值来设置状态，例如：

$('#home_pic').on('mouseenter mouseleave', function(e) {
    $('#home_tip').toggle(e.type==='mouseenter');
});

FIDDLE

【讨论】：

我喜欢这种方法。 +1（真正的）

【解决方案3】：

尝试使用 mouseleave 而不是 mouseout，如下所示： http://jsfiddle.net/tncbbthositg/dWKfX/

【讨论】：

【解决方案4】：

您需要以正确的方式编写 mouseenter 和 mouseleave 函数，如下所示：

$('#home_pic').mouseenter(function() {
    $("#home_pic").show();
},mouseleave(function() {
    $("#home_pic").hide();
}));

注意：代码未经过测试。

【讨论】：

$(this) 不会引用正确的 div。请注意，悬停 div 与工具提示 div 不同。
编辑了这篇文章，这就是为什么我确保将代码放在未经测试的地方。
所以，在你的代码中它应该仍然是#home_tip。此外，在这种情况下，您将 mouseleave 函数的结果作为处理程序传递给 mouseenter。我想这就是你要找的东西： $('#home_pic').mouseenter(function() { $("#home_tip").show(); }).mouseleave(function() { $("# home_tip").hide(); });

【解决方案5】：

如果工具提示在主页图片上运行，您也可以尝试类似的操作 - 我使用非常相似的代码在图像地图上弹出气泡

$('#research_area').mouseover(function() {
$('img#research').css('display', 'block');
runthis();
});



function runthis () {
if ( $('img#research').css('display') == 'block')  {
$('img#research').mouseleave(function() {
    $(this).css('display', 'none');
    });
}

http://www.karpresources.com/

【讨论】：