在懸停時更改img src時如何添加過渡？

Question

因此，當我使用javascript懸停原始圖片時，我嘗試添加其他圖片。 我的語法與此類似，效果很好。

function imgHover() {
    projectImage.src = '../img/img1.png';
}
function imgHover2() {
    projectImage.src = '../img/img2.png';
}

projectImage.addEventListener('mouseover', imgHover); 
projectImage.addEventListener('mouseleave', imgHover2); 

現在，我正在嘗試尋找一種方法，以使圖像從一個過渡到另一個（最有可能使用不透明度。）有關如何執行此操作的任何建議？ 我不知道。

Answer 1

您不能創建僅更改圖像的src標簽的過渡效果。

一種執行此方法的方法是創建兩個圖像，它們彼此絕對位於絕對頂部，而頂部圖像的不透明度為0。

如果您需要動態更改懸停圖片，仍然可以通過javascript進行。

 .image-wrapper { position: relative; } .image-hover { position: absolute; top: 0; left: 0; opacity: 0; transition: opacity 1s ease-out; } .image-hover:hover { opacity: 1; } 

 <div class="image-wrapper"> <img src="http://via.placeholder.com/350x150?text=normal" class="image" alt="normal" /> <img src="http://via.placeholder.com/350x150?text=hover" class="image-hover" alt="hover" /> </div>