Javascript 如何检测mouseenter或mouseleave

我试图在div是否悬停的情况下实现图像循环的效果

如果是mouseenter div，则循环浏览图像

如果mouseleave div，则停止在图像中循环并删除所有图像（只有背景图像可见）

目前，我正在使用setTimeout递归地触发自身，但我在jquery检测鼠标是否悬停或离开对象时遇到了问题

function logoImageLoop() {

  $(".one-box .social_gallery .social_img:first").show().next(".social_img").hide().end().appendTo(".one-box .social_gallery");

};

var oneBoxIsHover = false; 

$(".one-box").mouseenter(function(){
  timeout();

  function timeout() { 
    setTimeout(function(){
       logoImageLoop();
       timeout(); 
     }, 100);
  };

});

这里有一个代码笔供参考：

---

在本网站上悬停cargo徽标时，可以看到我试图实现的类似效果：

您只需清除mouseleave上的计时器

var timer = null;
$(".one-box").mouseenter(function(){
  timeout();

  function timeout() { 
    timer = setTimeout(function(){
       logoImageLoop();
       timeout(); 
     }, 100);
  };

}).mouseleave(function(){
  clearTimeout(timer);
});

---

这里有一个代码笔：

我会使用一个interval，还有JQuery

.hover（）

功能。只需替换

$（“.one box”）.mouseenter（）

，鼠标悬停时将运行循环，并在鼠标离开该区域后将其删除

重要的一点是：

var imageChangeInterval;

$(".one-box").hover(function() {
  imageChangeInterval = setInterval(function() {
    logoImageLoop();
  }, 100);
}, function() {
  clearInterval(imageChangeInterval);
});

完整示例：

函数logoImageLoop（）{ $（.one-box.social\u gallery.social\u img:first”）.show（）.next（“.social\u img”）.hide（）.end（）.appendTo（.one-box.social\u gallery”）； }; var oneBoxIsHover=false； //新代码： var图像变化区间； $（“.one-box”）.hover（函数（）{ imageChangeInterval=setInterval（函数（）{ logoImageLoop（）； }, 100); }，函数（）{ clearInterval（imageChangeInterval）； });

。一个盒子{
位置：相对位置；
高度：300px；
宽度：300px；
}
a.一盒{
宽度：100%；
}
.一盒一个img{
最大宽度：100%；
}
/*.social_img{display:none；}*/
a#社会#标志{
背景图片：url(https://s3-us-west-2.amazonaws.com/staging-site-assets/one-method/instagram-logo.png);
背景重复：无重复；
背景位置：0；
显示：块；
位置：绝对位置；
宽度：73px；
高度：73px；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
z指数：99；
}
.一个盒子。社交画廊{
位置：绝对位置；
左：0；
排名：0；
不透明度：1；
显示：无；
}
.nav_标志。社交画廊。社交图片{
位置：绝对位置；
浮动：无；
保证金：0；
不透明度：1；
过滤器：α（不透明度=100）；
溢出：隐藏；
排名：0；
左：0；
}

JQuery

.hover（）

有一个输入和输出处理程序：在代码中的任何地方，你都没有处理

mouseleave

事件。这个答案和另一个答案似乎都起到了作用，我不确定这两个选项中哪一个更好，但我很喜欢这称为“mouseleave”的方式。如果页面上有多个项目，我将如何合并“this”来表示哪个项目处于悬停状态，这段代码是否适用于该项目？