如何使用 CSS 和 HTML 防止懸停時圖像重疊？

使用CSS/HTML 修復懸停時的圖像重疊

嘗試使用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中文網其他相關文章！