如何在鼠标翻转时更改图像<img>(悬停)

在鼠标悬停时更改图像，可以使用HTML和CSS实现。以下是一个简单的示例：

1. 首先，在HTML文件中创建一个图像元素，并为其添加一个类名，例如hover-image：

<img src="image1.jpg" alt="Image 1" class="hover-image">

1. 接下来，在CSS文件中添加以下样式：

.hover-image {
  opacity: 1;
  transition: opacity 0.3s ease-in-out;
}

.hover-image:hover {
  opacity: 0;
}

.hover-image:hover + .hover-image {
  opacity: 1;
}

这段代码的作用是，当鼠标悬停在图像上时，图像的透明度会逐渐变为0，同时下一张图像的透明度会逐渐变为1。这样就实现了在鼠标悬停时更改图像的效果。

需要注意的是，这个方法只适用于两张图像的情况。如果需要更多的图像，可以使用CSS的伪元素（:before和:after）或者JavaScript来实现。