Javascript懸停圖片替換

我有一些社交媒體圖標，當它們懸停時，我想更改顏色。我認爲最簡單的方法就是用新的圖像替換圖像（它們是小的png文件）。你有什麼建議？動態函數將是理想的..有四個圖標，每個圖標的文件名爲demo.png，demo_hover.png。我正在使用jQuery庫。Javascript懸停圖片替換

謝謝！

HTML

<a class="a" id="interscope_icon" href="http://www.interscope.com/" alt="Interscope Records" target="_blank"><img class="icon" id="interscope" src="../Images/icons/interscope.png" alt="Interscope Records" /></a> 
    <a class="a" href="http://www.twitter.com/FernandoGaribay" alt="Twitter" target="_blank"><img class="icon" id="twitter" src="../Images/icons/twitter.png" alt="Fernando Garibay's Twitter" /></a> 
</p> 
<p> 
    <a class="a" href="http://www.facebook.com/f2inc" alt="Facebook" target="_blank"><img class="icon" id="facebook" src="../Images/icons/facebook.png" alt="Fernando Garibay's Facebook" /></a> 
    <a class="a" href="http://www.myspace.com/f2inc" alt="Myspace" target="_blank"><img class="icon" id="myspace" src="../Images/icons/myspace.png" alt="Fernando Garibay's Myspace" /></a> 
</p>

jQuery的

$('#interscope_icon').hover(function(){ 
    $('#interscope').attr('src', 'Images/icons/interscope.png'); 
});

來源

2011-01-13 technopeasant

我會給社會圖標作爲background-image上的錨（與display: inline-block;），而不是錨內爲<img />元素。

然後只需定義一個a:hover狀態，將CSS更改爲不同的背景。也許甚至是精靈們。

事情是這樣的：

#some_id { background-image: url(...); } 
#some_id:hover { background-image: url(...); }

來源

2011-01-13 06:01:22

簡單的方法是做到這一點的CSS方式：

#interscope_icon { background-image: url(...) } 
#interscope_icon:hover { background-image: url(...) }

來源

2011-01-13 06:01:35 lepe

你可能會更好過使用「CSS精靈」的方法，而不是加載新的圖像...

http://css-tricks.com/css-sprites/

來源

2011-01-13 06:02:12

如果將其與背景位置和漸變變換組合使用，這將不起作用。在這種情況下，你必須使用img標籤afaik。 – nottinhill

我只是有這個兩難問題，以及因此來到ü p用我自己的方法。超級簡單，工程巨大，且無需精靈，只是一個透明的PNG：

HTML：

<div class="facebookicon"> 
    <a href="#!"><img src="http://example.com/some.png"></a> 
</div>

CSS：

.facebookicon img { 
    background: #fff; 
    transition: background 400ms ease-out; 
} 

.facebookicon img:hover { 
    background: #3CC; 
    transition: background 400ms ease-in; 
} 
/* you need to add various browser prefixes to transition */ 
/* stripped for brevity */

http://jsfiddle.net/mattmagi/MpxBd/

讓我知道你在想什麼。

來源

2012-07-17 19:57:53 matt

非常好！我添加了你的jsfiddle內容到你的答案。 – kay

Javascript懸停圖片替換

回答

相關問題