Jquery 仅当鼠标悬停超过1秒时才执行此函数

当用户将鼠标悬停在某个元素上时，我想在该元素上添加和删除类，但仅当他们的光标停留在该元素上超过1秒时。我怎样才能做到这一点

$("#thumbs div").mouseenter(function() {
    $('#thumbs div').removeClass('hovered');
    $(this).addClass('hovered');
});

使用计时器：

var timer;
$("#thumbs div").mouseenter(function() {
    var that = this;
    timer = setTimeout(function(){
        $('#thumbs div').removeClass('hovered');
        $(that).addClass('hovered');
    }, 1000);
}).mouseleave(function() {
    clearTimeout(timer);
});

---

您可以使用悬停和延迟：

$("#thumbs div").hover(function() {
    $(this).delay(1000).queue(function(){
        $(this).addClass('hovered').siblings().removeClass('hovered');
    });
},function() {
    $(this).finish();
});

---

使用

setTimeout

和

clearTimeout

。有一个hoverintent插件可以实现这一目的。它在任意数量的悬停后显示1秒-@bfavaretto的答案是悬停整整一秒。

$("#thumbs div").hover(function() {
    $(this).delay(1000).queue(function(){
        $(this).addClass('hovered').siblings().removeClass('hovered');
    });
},function() {
    $(this).finish();
});