如何更改懸停時的圖像來源？-css教學-PHP中文網

如何更改懸停時的圖像來源？

Linda Hamilton

發布： 2024-12-16 18:51:14

原創

355 人瀏覽過

How Can I Change an Image Source on Hover?

更改懸停時的圖像來源：綜合指南

您可能會遇到需要動態變更

您可能會遇到需要動態變更

您可能會遇到需要動態變更

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

登入後複製

的來源URL 的場景;img>當滑鼠懸停在其上時標記。雖然這看起來是一項簡單的任務，但它並不像人們想像的那麼容易實現。

CSS 陷阱

最初，您可以嘗試使用CSS 的content 屬性來取代映像來源，如下程式碼所示：

<div>

登入後複製

#my-div {
    background-image: url('http://dummyimage.com/100x100/000/fff');
}

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

登入後複製

但是，這種方法僅適用於Webkit 瀏覽器，例如Google Chrome。其他主要瀏覽器，例如 Firefox 和 Safari，會忽略此上下文中的 content 屬性。

HTML 和 CSS 替代方案

如果 CSS 不是一個選項，您可以考慮替換如何更改懸停時的圖像來源？

帶有 <div> 的標籤標籤。透過設定<div>的背景圖片並在懸停時修改它，您可以有效地實現所需的結果：

<img>

登入後複製

const myImg = document.getElementById('my-img');

myImg.addEventListener('mouseover', () => {
    myImg.setAttribute('src', 'http://dummyimage.com/100x100/eb00eb/fff');
});

myImg.addEventListener('mouseout', () => {
    myImg.setAttribute('src', 'http://dummyimage.com/100x100/000/fff');
});

登入後複製

JavaScript 解決方案為了獲得最大的多功能性，您可以利用JavaScript直接操作

的src 屬性標籤。此方法適用於所有主要瀏覽器：透過採用其中一種技術，您可以無縫變更

的來源 URL。懸停標記，為您的 Web 應用程式提供動態且引人入勝的視覺體驗。

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