我在Chrome 上运行它
我的问题-鼠标触摸所有图像后，即使onmouseout来自一个图像，所有图像也会同时发生变化
我不明白为什么这是
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<img src="https://i.stack.imgur.com/iYL3x.gif" onmouseover="this.src='https://i.stack.imgur.com/ht3Jw.gif'" onmouseout="this.src='https://i.stack.imgur.com/lmBrB.gif'">
<img src="https://i.stack.imgur.com/iYL3x.gif" onmouseover="this.src='https://i.stack.imgur.com/ht3Jw.gif'" onmouseout="this.src='https://i.stack.imgur.com/lmBrB.gif'">
</body>
</html>图像源信息
艺术家：Sevarihk
原件：https://opengameart.org/content/animated-bamboo-door-sprite
[dor_1.gif][1]
[door_1_close.gif][2]
[door_1_open.gif][3]
这是因为两个<img>表示相同且唯一的内部gif图像。当您再次将<img>的src设置为该URL时，将根据规格重新加载gif动画。但它会为该图像的所有实例重新加载
您可以通过欺骗浏览器使其认为两个图像是分开的来避免这种情况，例如，在URL:中添加一个查询参数
(请注意我在mouseout事件处理程序中添加到URL末尾的?A和?B(。
<img src="https://i.stack.imgur.com/iYL3x.gif" onmouseover="this.src='https://i.stack.imgur.com/ht3Jw.gif'" onmouseout="this.src='https://i.stack.imgur.com/lmBrB.gif?A'">
<img src="https://i.stack.imgur.com/iYL3x.gif" onmouseover="this.src='https://i.stack.imgur.com/ht3Jw.gif'" onmouseout="this.src='https://i.stack.imgur.com/lmBrB.gif?B'">但这意味着图像实际上被加载了两次。。。