Javascript jQuery：使用：悬停的简单动画

我在这页上有四个正方形。它们都有

：带有转换的hover

伪类，它将在

hover

上0.5秒内添加

inset

阴影

我需要做的是编写一个jQuery代码，它将平滑地随机模拟页面加载上的

：hover

状态

对不起，解释有点不清楚。因此，当页面加载时，jQuery会在一个方块上添加阴影，然后在一段时间内将其移除，然后以随机顺序对其他方块执行相同的过程

这是我的代码：

---

致以最诚挚的问候

您可以这样做：

1-复制粘贴您的

：将CSS代码悬停在另一个类中，例如
。悬停在

2-可选：向
s
元素添加一个类，如
.squares

3-在数组中添加元素：

//If you don't will to put a class
var arrayOfSquares = [$('s1'),$('s2'),$('s3'),$('s4')];
//If you do, it's cleaner
var arrayOfSquares = $('.squares'); 

4-在JS中放置计时器，然后使用
Math.random
和
Math.floor
从数组中获取随机元素：

//Every 8 seconds, call this code :
window.setInterval(function() {
    var index = Math.floor(Math.random() * arrayOfSquares.length); //Take a number between 0 and your number of elements
    var currentSquare = $(arrayOfSquares[index]); //Get your jQuery DOM element

    //Add the class, wait 2 seconds, then remove it
    currentSquare.addClass('hovered').delay(2000).removeClass('hovered');

}, 8000);

这把小提琴我试过了。看起来效果不错，看看你的想法：

我添加了一个class.hover来进行转换，并添加了以下jquery：

$(function() {

    var myArray = ['#s1', '#s2', '#s3', '#s4'];

    window.setInterval(function(){
        doHover();   
    }, 2000);

    function doHover(){
        var rand = myArray[Math.floor(Math.random() * myArray.length)];
        for(i in myArray){
            $(myArray[i]).removeClass("hover");    
        }

        $(rand).addClass("hover");      
    }

    doHover();

})

当有人将鼠标悬停在我估计的方格上时，您需要一些额外的代码来停止悬停效果。
添加代码会有所帮助。