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

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

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

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

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

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

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

CSS 陷阱

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

<div>
<pre class="brush:php;toolbar:false">#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 不是一個選項，您可以考慮替換 <img alt="如何更改懸停時的圖像來源？" >帶有

的標籤標籤。透過設定

的背景圖片並在懸停時修改它，您可以有效地實現所需的結果：

<img  alt="如何更改懸停時的圖像來源？" >

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直接操作<img alt="如何更改懸停時的圖像來源？" > 的src 屬性標籤。此方法適用於所有主要瀏覽器：透過採用其中一種技術，您可以無縫變更 <img alt="如何更改懸停時的圖像來源？" > 的來源 URL。懸停標記，為您的 Web 應用程式提供動態且引人入勝的視覺體驗。