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

Question

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

到目前为止，我已经写了——

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

如果鼠标进入 div 然后离开，则该方法有效，但如果它没有获得焦点，则无效。

Answer 1

该mouseover事件将永远不会在 .toolTip div 上调用，因为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);
    }
});

​演示