如何使用 CSS 或 JavaScript 無縫交換懸停時的圖片？

如何使用CSS/HTML 在懸停時動態交換影像

將影像設定為在滑鼠懸停時動態變更時，至關重要解決某些細微差別，以確保達到預期效果。當原始影像持續存在並與新影像重疊時，會出現一個常見問題，而高度和寬度可能不會相應調整。

程式碼片段：

考慮此範例HTML /CSS程式碼：

<img  src="/static/imghwm/default1.png" data-src="LibraryTransparent.png" class="lazy" alt="如何使用 CSS 或 JavaScript 無縫交換懸停時的圖片？" >

#Library {
    height: 70px;
    width: 120px;
}

#Library:hover {
    background-image: url('LibraryHoverTrans.png');
    height: 70px;
    width: 120px;
}

在:hover狀態下使用background-image是一種動態改變影像的方法。然而，可以使用JavaScript 來使用額外的解決方案：

JavaScript 選項：

<img  src="LibraryTransparent.png" onmouseover="this.src='LibraryHoverTrans.png';" onmouseout="this.src='LibraryTransparent.png';" alt="如何使用 CSS 或 JavaScript 無縫交換懸停時的圖片？" >

在這種情況下，JavaScript 用於在滑鼠移動時交換圖像來源懸停在滑鼠上方並在滑鼠移開時恢復它。此方法可確保原始影像消失並由新影像無縫替換，從而防止任何重疊或尺寸問題。

以上是如何使用 CSS 或 JavaScript 無縫交換懸停時的圖片？的詳細內容。更多資訊請關注PHP中文網其他相關文章！