Question

基本上我想淡出一个元素，如果在x秒之后没有触发鼠标悬停事件。我已经尝试了几个小时，似乎无法编写代码才能正常工作。

到目前为止，我写过 -

$('.toolTip').live('mouseover', function() {
    $(this).stop(true, true).fadeIn();
});
$('.toolTip').live('mouseleave', function() {
    $(this).delay(4000).fadeOut("slow");
});

如果鼠标进入div然后离开，那么它是有效的，但如果它没有获得焦点则不行。

Answer 1

永远不会在.toolTip div上调用mouseover事件，因为fadeOut()将通过将display:none应用于元素来完成，从而防止您再次将其鼠标悬停在该元素上。您可以使用fadeTo（）来改变它的不透明度而不影响它的显示属性，而不是fadeOut（）。

$(document).on('mouseover', '.toolTip', function() {
    $(this).stop().fadeTo("fast", 1);
});

$(document).on('mouseleave', '.toolTip', function() {
    $(this).delay(4000).fadeTo("slow", 0);
});

Answer 2

实现此目的的一种方法是在鼠标悬停事件之外添加fadeTo()命令，以便它最初开始淡出：

$(".toolTip").delay(1000).fadeTo(5000, 0);
$(".toolTip").on({
    mouseleave: function() {
        $(this).delay(1000).fadeTo(5000, 0);
    },
    mouseenter: function() {
        $(this).stop().fadeTo(500, 1);
    }
});

DEMO

如果鼠标没有悬停元素，则淡出

2 个答案: