使用 CSS 或 JavaScript 更改懸停圖像時如何防止圖像重疊？

使用HTML、CSS 和JavaScript 自訂懸停時的圖像外觀

處理懸停時的圖像過渡時，您可能會遇到常見問題是底層影像仍然可見，且更新後的影像無法調整到所需的高度和寬度，從而導致重疊。

在您的程式碼片段中：

<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 選擇器中使用以下 CSS 屬性：

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

background-size: cover 屬性可確保更新的圖片填滿整個空間元素，防止重疊。

或者，您可以使用 JavaScript 來處理映像轉換。這種方法可讓您直接變更影像的 src 屬性：

<img  src="/static/imghwm/default1.png" data-src="LibraryTransparent.png" class="lazy" onmouseover="this." onmouseout="this." alt="使用 CSS 或 JavaScript 更改懸停圖像時如何防止圖像重疊？" >

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