Question

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

这是我的代码：

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

Answer 1

使用mouseleave而不是mouseout（）

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

或使用.hover

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

Answer 2

你可以使用toggle()函数，它接受一个布尔来设置状态，如下所示：

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

FIDDLE

Answer 3

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

Answer 4

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

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

注意：代码未经测试可用。

Answer 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/

mouseenter / mouseout使div闪烁

5 个答案: