嘗試使用CSS 和HTML 更改懸停時的圖像時，經常會遇到原始圖像無法顯示的問題仍然可見，或者新影像的縮放比例不正確。以下是解決此問題的方法：
在HTML 中，您有一個 ID 為「Library」的元素：
<img src="LibraryTransparent.png">
在CSS 中，您有以下樣式規則：
#Library {
height: 70px;
width: 120px;
}
#Library:hover {
background-image: url('LibraryHoverTrans.png');
height: 70px;
width: 120px;
}這裡的問題是，當您更改背景時懸停狀態的圖像，您沒有隱藏原始圖像。要解決此問題，您可以使用 display 屬性使原始映像在懸停時不可見：
#Library:hover {
background-image: url('LibraryHoverTrans.png');
height: 70px;
width: 120px;
display: block;
}或者，您可以使用 JavaScript 變更 的 src 屬性。懸停時的元素：
document.getElementById("Library").onmouseover = function() {
this.src = 'LibraryHoverTrans.png';
};
document.getElementById("Library").onmouseout = function() {
this.src = 'LibraryTransparent.png';
};透過實作這些解決方案之一，您可以確保原始影像被隱藏，並且當您將滑鼠懸停在影像上時，新影像顯示正確縮放。
以上是如何使用 CSS 和 HTML 防止懸停時圖像重疊？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
