仅在鼠标悬停超过1秒时才执行功能

本文介绍了仅在鼠标悬停超过1秒时才执行功能的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

例如，当用户将鼠标悬停在元素上时，我想在元素上添加和删除类，但是仅当其光标停留在元素上超过1秒钟时才可以.我该如何实现?

I would like to add and remove classes on elements when a user hovers over an element, but only if their cursor has been on it for more than 1 second for example. How can I achieve this?

$("#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);
});

http://jsfiddle.net/qGRcH/

这篇关于仅在鼠标悬停超过1秒时才执行功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！