javascript - jQuery 在 div 背景中循环照片

Question

当鼠标悬停在 div 上循环并更改背景图像时，我已成功完成并停止其他 divs 来自循环。

发生的情况是，当鼠标悬停在 div 上时，此 div 会出现一个标题，如果我捕获光标并将其放在标题上，然后再次将光标移动到另一个 div 标题，循环在两个 div 中继续，但我不想这样做。

我用这种方式清除间隔周期:clearInterval(theInterval);

但是，不知何故，当标题悬停时它不会停止其他循环。

问题可见 JSFiddle 。

模拟问题:

1. 将光标置于标题上
2. 将光标快速移动到另一个 div 标题
3. 您会看到两个 div 独立地继续循环(我只想循环一个)

模拟其工作原理:

1. 将光标放在 div 上(不要位于标题中)
2. 将光标移至另一个 div
3. 您会看到只有一个 div 循环

Answer 1

我认为这是 mouseover 事件的本质问题，而且 div 距离如此之近。尝试改用悬停事件。请参阅this fiddle

本质上:

$('.collection-photo').hover(function(){
  // mouse over stuff here
}, function() {
  // mouse out stuff here
});