通过css循环覆盖悬停项目

Question

我必须在一个项目中制作一些基本功能。我们有四个元素，当有人在其中一个上盘旋时，它应该得到黄色边框（叠加）。叠加元素应以圆圈旋转并始终可见。 它应该是这样的：

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

您可以看到我在codepen中创建的基本标记。它的风格不正确，但我认为现在最重要的是JS。

LINK

JS：

// HOMEPAGE CIRCLE
var circle = $('#circle'),
    elems = $('.home-single-item'),
    overlay = $('#home-overlay'),
    arrow = $('.home-arrow'),
    texts = $('.home-single-item-text');

    texts.eq(0).addClass('active');

elems.on( 'mouseover', function( event ) {
    var index = $(this).index();      

    if ( index === 2 ) {
        index = 3;
    } else if ( index === 3 ) {
        index = 2;
    }

    var rotate = index * 90;
    var arrowz = ( index + 2 ) * 90;

    console.log( index );
    console.log( rotate );

    overlay.css({
        'transform': 'rotate(' + rotate + 'deg)'
    });

    arrow.css({
        'transform': 'rotate(' + arrowz + 'deg)'
    });

    texts.removeClass('active');
    texts.eq(index).addClass('active');
});

提前致谢。

Answer 1

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

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

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

});

它可能不会立即起作用，但确保新旋转比前一次旋转更多是你想要的。