為什麼我的懸停圖像重疊而不是替換原始圖像？

使用CSS/HTML 懸停修改圖像顯示

當嘗試在滑鼠懸停時用另一個圖像替換圖像時，可能會出現以下情況：原始影像仍然可見，或新影像無法調整其尺寸，導致它們重疊。下面是問題和可能的解決方案。

提供的程式碼顯示了問題：

<img  src="/static/imghwm/default1.png" data-src="LibraryTransparent.png" class="lazy" alt="為什麼我的懸停圖像重疊而不是替換原始圖像？" >

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

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

在此程式碼中，設定懸停時的背景圖像可確保第二個圖像出現在第一個圖像上，但可能無法正確調整其大小或位置。

替代解決方案：使用JavaScript

另一個選項是利用JavaScript 來處理影像變更：

<img  src="LibraryTransparent.png" onmouseover="this.src='LibraryHoverTrans.png';" onmouseout="this.src='LibraryTransparent.png';" alt="為什麼我的懸停圖像重疊而不是替換原始圖像？" >

在這種方法中，當滑鼠懸停在onmouseover 事件上時，onmouseover 事件會將圖像來源變更為替代圖像來源，並且onmouseout事件會在滑鼠離開時將來源恢復為原始影像。使用 JS 可以更直接地控制影像操作，確保影像之間的無縫過渡。

以上是為什麼我的懸停圖像重疊而不是替換原始圖像？的詳細內容。更多資訊請關注PHP中文網其他相關文章！