如何使用 HTML、CSS 和 JavaScript 更改懸停時的圖像來源 URL？

更改懸停時的圖像源URL

問題：

您想要動態更新

您想要動態更新

的來源URL圖像>當使用者將滑鼠懸停在其上時標記。

嘗試和問題：

您使用 CSS 的內容屬性和 :hover 選擇器的初始方法不起作用。

解決方案：

更改src時直接使用CSS 屬性是不可能的，這裡有兩種使用HTML、CSS 和JavaScript 的替代方法：
2. 方法1：使用背景圖片

取代;帶有 <div> 的標籤

<div>

#my-div:hover {
    background: url(hover-image.jpg);
}

設定<div>的背景圖片使用 CSS 變更為預設圖片。

使用 :hover 選擇器將背景影像更新為懸停影像。

2. 方法2：使用JavaScript

<img>

function hoverImage(element) {
    element.src = "hover-image.jpg";
}

function unhoverImage(element) {
    element.src = "default-image.jpg";
}

定義JavaScript 函數以更改懸停時的src 屬性定義JavaScript 函數以更改懸停時的src 屬性將懸停函數指派給onmouseover 事件，並將unhover 函數指派給 的 onmouseout 事件。標籤。