仅在一定时间后应用悬停效果,如果鼠标退出,也要删除效果

时间:2018-12-19 19:47:51

标签: javascript

尝试设置类似div的页面的网格,该网格将在每个div上触发悬停事件,但前提是鼠标停留在悬停点上一秒钟左右。

我有一支笔正在这里使用:https://codepen.io/skypod/pen/bOBZRQ?editors=0011

我正在处理的特定部分在JS文件中的第142-149行。

该代码是:

var t;
$('.pixel').hover(function(){    
  t = setTimeout(function(){
    console.log('hovering');
  }, 2000); 
}, function(){
  clearTimeout(t);
});

我希望它具有这样的功能。将鼠标移到页面上,没有任何内容记录到控制台。您停止移动鼠标几秒钟,超时结束并触发一次悬停功能。

现在它可以执行此操作,但是它将在超时期间为您悬停的每个div触发每个悬停功能。例如,将鼠标悬停在div的1、2和3上超过2000毫秒的超时时间,它将触发所有3个div的悬停功能。我希望它立即清除不再悬停的div上的悬停功能。我感觉自己已经接近了,但是我缺少一些简单的东西。

0 个答案:

没有答案