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

使用HTML、CSS 和JavaScript 修改懸停時的圖像來源

修改 的來源URL

修改 僅CSS（Webkit特定）

單獨使用 CSS，您可以將圖片替換為不同的 URL徘徊。但是，它僅適用於基於Webkit 的瀏覽器，例如Google Chrome：

#my-img:hover {
    content: url('http://dummyimage.com/100x100/eb00eb/fff');
}

使用Div 背景圖像

或者，您可以使用

懸停時取代背景影像的元素：

div {
    background: url('http://dummyimage.com/100x100/000/fff');
}
div:hover {
    background: url('http://dummyimage.com/100x100/eb00eb/fff');
}

使用JavaScript

使用 JavaScript，您可以動態設定 的來源。滑鼠懸停和滑鼠移出時的標記：

function hover(element) {
  element.setAttribute('src', 'http://dummyimage.com/100x100/eb00eb/fff');
}

function unhover(element) {
  element.setAttribute('src', 'http://dummyimage.com/100x100/000/fff');
}

<img>

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