javascript - 通过 css 循环覆盖悬停元素

Question

我必须在一个元素中制作一些基本功能。我们有四个元素，当有人将鼠标悬停在其中之一上时，它应该有黄色边框(覆盖)。 Overlay 元素应绕圈旋转并始终可见。 它应该看起来像这样:

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

您可以看到我在 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

});

它可能不会立即起作用，但确保新的轮换比以前的轮换更多是您想要的。