Onmouseover 改变图像过渡

Question

当我对它进行 hover 时，我有以下代码片段来更改img标签的 src。

<img src="./Path/to/image.png" alt="" class="exhibit-banner-img" onmouseover="this.src='./Path/to/newimage.png'" onmouseout="this.src='./Path/to/image.png'">

它按预期运行，但是如何在事件触发时向图像添加过渡时间？ 现在，它立即改变。

Answer 1

请使用此代码。

 .img-container { position: relative; display: inline-block; }.img-container img { width: 200px; height: 200px; vertical-align: middle; object-fit: cover; transition: all.5s ease; }.img-container img:first-child { position: relative; }.img-container img:last-child { position: absolute; z-index: 1; top: 0; left: 0; opacity: 0; }.img-container:hover img:last-child { opacity: 1; }

 <span class="img-container"> <img src="https://www.w3schools.com/html/pic_trulli.jpg"> <img src="https://www.w3schools.com/html/img_chania.jpg"> </span>