Question

我目前正在使用此代码：

    $('#startLabel').live('mouseover',function(){
$('.startTooltip').fadeIn();
     });

    $('#startLabel').live('mouseout',function(){
$('.startTooltip').fadeOut();
     });

当用户将鼠标悬停在#startLabel div上时显示工具提示div，并在用户将光标移开时隐藏工具提示。

我想更改此设置，以便在#startLabel div悬停3秒后才会显示工具提示，是否有人可以告诉我如何执行此操作？

我试过这个：

    $('#startLabel').live('mouseover',function(){
    setTimeout( function() {
$('.startTooltip').fadeIn();
}, 3000 );
     });

但是如果您将鼠标悬停在它上面然后将其悬停，工具提示仍会显示。

感谢您的帮助。

Answer 1

$('#startLabel').live('mouseout',function(){
    $('.startTooltip').delay(4000).fadeIn();
 });

并使用.stop（[clearQueue] [，jumpToEnd]）清除mouseout上的队列; [（true，false）应该这样做。]

Answer 2

我怀疑你想要的是clearTimeout功能。

您可以使用以下内容：

var timer;
$('#startLabel').live('mouseover',function(){
    timer = setTimeout( function() {
    $('.startTooltip').fadeIn();
    }, 3000 );
});

$('#startLabel').live('mouseout',function(){
    $('.startTooltip').fadeOut();
    cancelTimeout(timer);
});

本质上，setTimeout返回一个可用于取消超时的值，因此如果你离开相关区域，你就取消它。

延迟Jquery .live鼠标悬停功能

2 个答案: