Javascript 悬停滑行

当我将鼠标悬停在某张幻灯片上时，我希望它停止

我尝试的javascript代码：

$（“.rotate slider”）.hover（函数（）{
$（this）.find（“.rotate slider”）.stop（true，true）.fadeOut（）；
}，函数（）{
$（this.find（“.rotate slider”）.stop（true，true.fadeIn（）；
});

我还尝试使用css来获得它：

。旋转滑块：悬停。滑块
{
-webkit动画播放状态：暂停；
-moz动画播放状态：暂停；
-o-动画播放状态：暂停；
动画播放状态：暂停；
}

---

不幸的是，上述代码似乎都不起作用。

您可以在此处检查更新的代码：

您需要在悬停时使用clearInterval，在悬停时需要再次初始化它

$( ".rotate-slider li" ).hover(function() {      
    clearInterval(rotateInterval);
}, function() {
  rotateInterval = window.setInterval(function(){
                if(!rotateSlider.slidesContainer.hasClass('animate')){
                    rotateSlider.slidesContainer.addClass('animate')
                }
                currentRotation = currentRotation - rotateSlider.slideAngle;
                rotateSlider.slidesContainer.css('transform', 'translateX(-50%) rotate('+currentRotation+'deg)');
            }, 4000);
});

---

这里有一个问题。当我将指针悬停在其中一个滑块上时，它会停止。但当我将光标从幻灯片上移开，并将光标移到幻灯片下方灰色半圆区域时，它不会恢复旋转。为什么会发生这种情况？任何想法。谢谢。你可以检查更新的代码和小提琴。发生这种情况是因为滑块覆盖整个区域。所以当你停下来的时候。所以我把它改成了li hover。