`onmouseover` 上的图像转换

Question

我正在使用此代码从一个图像更改为另一个图像：

<img title="Hello" src="selfie.jpg" onmouseover="this.src='hero_image.png'" onmouseout="this.src='selfie.jpg'" />

我需要有关代码的帮助，以便可以减慢从一张图像到下一张图像的转换速度。

Answer 1

理想的解决方案是渲染两个图像并更改它们的opacity ，而不是更改同一标签的src 。 就像是：

<div id="container">
  <img class="bottom" src="hero_image.png" />
  <img class="top" src="selfie.svg" />
</div>

使用opacity后，可以使用以下CSS应用过渡效果：

#container img {
  position:absolute;
  left:0;
  transition: opacity 1s ease-in-out;
}

#container img.top:hover {
  opacity:0;
}