Javascript 从缝合图像悬停时的图像更改

我有一个图像，创建有4个图像在一个

现在，我要做的是让css只加载顶部的第一个方块。然后，当用户将鼠标悬停在该图像上时，它将在所有四个图像之间切换

因此，加载时它将显示黑色，当用户将鼠标悬停在它上方时，图像将变为红色，然后变为蓝色，然后变为绿色，然后变回黑色。然后反复重复，直到鼠标离开图像区域

我知道我可以通过将png转换为gif来实现这一点，但图像是在我的控制之外生成的，因此需要这种方法。 如果有人能帮助我，我将永远感激

干杯。

您应该使用和来进行更改，当超过使用setInterval函数来更改位置时（此处图像的每个块的高度为300px，因此我们在每个定义的间隔时间内增加+300）

在下面的代码片段中，我使用jquery函数来设置和清除Annation

var区间；
$（函数（）{
$（“#图像”）。悬停（
函数（）{
var-bottom=0；
$this=$（this）；
间隔=设置间隔（函数（）{
底部>=900？底部=0：底部+=300；
$this.css（{'background-position'：'0px-'+bottom+'px'}）；
} , 1000)
}, 
函数（）{
$this.css（{'background-position'：'0'}）
间隔时间；
}
);
});
#图像{
宽度：150px；
高度：150像素；
背景：url（'https://i.stack.imgur.com/h8h14.png'）0px；
}
您可以添加一些您已经尝试过的代码吗？