Javascript 通过css在悬停项上循环覆盖

我必须在一个项目中做一些基本的功能。我们有四个元素，当有人在其中一个元素上悬停时，它应该是黄色边框（覆盖）。叠加元素应以圆形旋转，并且始终可见。 应该是这样的：

我用JS编写了一个脚本，通过css rotate旋转覆盖元素，但我不知道如何循环它。。我的意思是当有人悬停元素时，它工作正常，但当有人悬停最后一个元素（在左边）和下一个悬停第一个元素（在顶部），然后覆盖元素返回（朝不同的方向移动）-我知道这是正确的行为，但我不知道如何循环这个移动，因为每次叠加元素都会朝这个方向移动

你可以看到我用代码笔做的基本标记。它的样式不正确，但我认为现在最重要的是JS

JS:

---

提前感谢。

您基本上需要有一个始终高于上一个的旋转值

这只是相当混乱的psuedo代码，但您可以尝试以下方法：

var prevRotate;

elems.on( 'mouseover', function( event ) {

    // snip

    var rotate = index * 90;
    if(prevRotate && rotate < prevRotate){
        rotate = rotate + Math.ceil(prevRotate/360) * 360;
    }
    prevRotate = rotate;

    // snip

});

var；
元素打开（'mouseover'，函数（事件）{
//剪断
var=index*90；
如果（prevRotate&&rotate

---

它可能不会立即起作用，但确保新的旋转比上一个旋转更有效是您所需要的。

只是想一想-您不可能让在每个图像上添加悬停效果类而不是jquery之类的东西更容易吗？

var prevRotate;

elems.on( 'mouseover', function( event ) {

    // snip

    var rotate = index * 90;
    if(prevRotate && rotate < prevRotate){
        rotate = rotate + Math.ceil(prevRotate/360) * 360;
    }
    prevRotate = rotate;

    // snip

});