如何使用 CSS 或 JavaScript 正確更改懸停時的圖像？

使用CSS/HTML 變更懸停時影像的外觀

您可能會遇到將影像設定為顯示不同的問題滑鼠懸停停時的影像，但原始影像仍然可見，並且新影像重疊或不改變大小。對於 HTML/CSS 初學者來說，這個看似簡單的任務可能會帶來挑戰。

要解決此問題，請確保使用透明影像檔案將原始影像正確設定為透明。此外，請檢查您的CSS 規則是否使用適當的選擇器語法定位到正確的元素：

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

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

但是，如果使用CSS 無法解決問題，您可以考慮使用JavaScript 的替代方法：

<img  src="LibraryTransparent.png" onmouseover="this.src='LibraryHoverTrans.png';" onmouseout="this.src='LibraryTransparent.png';" alt="如何使用 CSS 或 JavaScript 正確更改懸停時的圖像？" >

在此JavaScript 程式碼中，onmouseover 和onmouseout 事件用於根據滑鼠互動動態變更影像來源。

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