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

【问题标题】：Fade out if mouse does not hover element如果鼠标没有悬停元素，则淡出
【发布时间】：2012-08-10 02:36:32
【问题描述】：

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

到目前为止我已经写了 -

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

如果鼠标进入 div 然后离开，这会起作用，但如果它没有获得焦点，则不会。

【问题讨论】：

标签： javascript jquery hover

【解决方案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);
});

【讨论】：

抱歉，Derek，我觉得我解释得不好。如果鼠标没有进入 toolTip 元素以使其淡出。但如果在淡出期间悬停，显然停止并将不透明度恢复为 100%。
很公平，但我原来的说法仍然有效。它不起作用，因为 fadeOut() 会完全隐藏它并防止任何未来的鼠标悬停。不确定这与您接受的答案有何不同。
抱歉，$(".toolTip").delay(1000).fadeTo(5000, 0); 是我想要实现的，只是在元素从未悬停或交互过一段时间后淡出它。我试图用计时器触发它，但显然这是一个愚蠢的错误。感谢您对fadeOut() 的建议！它确实解释了我的另一个愚蠢错误！谢谢@Derek

【解决方案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

【讨论】：

谢谢你，Alex，正是我想要的！