javascript - mouseenter/mouseout 使 div 闪烁

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');
});

小提琴

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

you can also try something like this if the tooltip runs over the home pic - I've used very similar code to pop up bubbles on a image map

$('#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/