CSS：更改 img：hover 上的圖像 src

問題描述

我需要更改 hover 上的<img> 源 URL 。

我已經嘗試過但不行：

HTML

<img id="my-img" src="http://dummyimage.com/100x100/000/fff"/>

CSS

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

jsFiddle

任何幫助將不勝感激。

更新：

這僅適用於 Webkit /Google Chrome 。

最佳解決方案

只有 html 和 css，它不可以改變圖像的 src 。如果您使用 div 標籤替換 img 標籤，那麼您可能會更改設置為背景的圖像

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

如果您認為可以使用一些 JavaScript 代碼，那麼您應該可以如下更改 img 標籤的 src

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

和 html 是

<img id="my-img" src="http://dummyimage.com/100x100/000/fff" onmouseover="hover(this);" onmouseout="unhover(this);" />

次佳解決方案

我修改了幾個關於 Patrick Kostjens 的變化。

<a href="#">
<img src="http://icons.iconarchive.com/icons/fasticon/angry-birds/128/yellow-bird-icon.png" 
onmouseover="this.src='http://icons.iconarchive.com/icons/fasticon/angry-birds/128/red-bird-icon.png'"
onmouseout="this.src='http://icons.iconarchive.com/icons/fasticon/angry-birds/128/yellow-bird-icon.png'"
border="0" alt=""/></a>

DEMO

http://jsfiddle.net/ssuryar/wcmHu/429/

第三種解決方案

您可以做的是通過將 width 和 height 設置為 0 來隱藏實際圖像並應用一些 CSS 來執行所需操作：

#aks {
    width:0px;
    height:0px;
    background:url('http://dummyimage.com/100x100/000/fff');
    padding:50px;
}

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

並且填充使得 img 標籤的大小要達到 (實際圖像的一半大小) 。

Fiddle

第四種方案

我有一個類似的問題，但我的解決方案是有兩個圖像，一個隱藏 (顯示：無) 和一個可見。在懸停在周圍的範圍內，原始圖像將更改為顯示：無，另一個要顯示的圖像：塊。 (可以根據您的情況使用’inline’)

此示例使用兩個跨標籤而不是圖像，因此您可以在此處運行時看到結果。我沒有任何在線圖像來源不幸使用。



#onhover {
  display: none;
}
#surround:hover span[id="initial"] {
  display: none;
}
#surround:hover span[id="onhover"] {
  display: block;
}
<span id="surround">
    <span id="initial">original</span>
    <span id="onhover">replacement</span>
</span>

第五種方案

我還有一個解決方案。如果有人使用 AngularJs：http://jsfiddle.net/ec9gn/30/

<div ng-controller='ctrl'>
    <img ng-mouseover="img='eb00eb'"  ng-mouseleave="img='000'"
         ng-src='http://dummyimage.com/100x100/{{img}}/fff' />
</div>

Javascript：

function ctrl($scope){
    $scope.img= '000';
}

沒有 CSS ^^。

參考文獻

CSS: Change image src on img:hover

注：本文內容整合自 Google/Baidu/Bing 輔助翻譯的英文資料結果。如果您對結果不滿意，可以加入我們改善翻譯效果：薇曉朵技術論壇。

CSS：更改 img：hover 上的圖像 src