懸停時如何將圖標從灰色變爲全綵色？

我有一個灰色的Facebook圖標和一個全綵色的Facebook圖標。我想讓他們在我的網站上，這樣當鼠標光標放在灰色圖標上時，它就變成了全綵色的圖標。我如何實現這一目標？懸停時如何將圖標從灰色變爲全綵色？

2011-06-26 james

使用CSS sprites並根據元素和元素的CSS類移位：hover。

2011-06-26 19:38:55 Kon

這。它不需要額外的元素，因爲你可以在任何東西上設置背景圖像。懸停時不會有任何閃爍，因爲它使用精靈，用戶不能右鍵單擊或拖動圖像 - 這種事情的理想選擇。 –

你需要有從圖標2個版本，一個是灰色的，另一着色，懸停，開關：

icon 
{ 
    background-image: greyIconURL 
} 

icon:hover 
{ 
    background-image: coloredIconURL 
}

另一種方式，更好地爲@Kon solution

來源

2011-06-26 19:39:00

css不會改變圖像的src。它只是（希望你會同意）一種解決方法。它不會是一個圖像，它只會是一個div – Achshar

是的，同意，這不是一個圖像，如果他需要改變圖像的src，所以你的解決方案將工作，但接縫他需要使用CSS的答案，而不是js。 –

hmm right也許@james可以解釋他需要什麼..該標籤暗示css，但它不會很好的搜索引擎優化和用戶不會看到圖像的上下文菜單，跨越不會閱讀高度/寬度沒有顯示：塊和div ..以及divs不dont似乎有任何缺點，但仍然不如img標籤更好。 – Achshar

-3

<img src="grey.png" onmouseover="this.src='blue.png'" onmouseout="this.src='greay.png'" />

編輯使用此代替您希望遵循以下規則但增加複雜性和KB

HTML

<img id="yourImage" />

document.getElementsByTagNames('body')[0].addEventListener('load', function() { 
    document.getElementById('yourImage').addEventListener('mouseover', function() { 
     document.getElementById('yourImage').src = 'color.jpg' 
    }, false); 
    document.getElementById('yourImage').addEventListener('mouseout', function() { 
     document.getElementById('yourImage').src = 'grey.jpg' 
    }, false); 
}, false);

PS這個使用JavaScript，而不是你的CSS標籤，只是因爲它是使用圖像標記儘可能因爲瀏覽器將相的圖像爲圖像的好習慣到一個div標籤，他們將它視爲一個內容塊（這是不好的！）。

來源

2011-06-26 19:43:31 Achshar

可否下載選民請解釋原因？ – Achshar

鄧諾。也許OP想要一個純CSS的解決方案，因爲它被標記爲「CSS」？ –

嗯也許。 right ..：O – Achshar

老問題，與舊的鏈接新的答案：
http://webdesignerwall.com/tutorials/html5-grayscale-image-hover顯示與jQuery，一個解決方案，它不需要2幅圖像（所以如果你想要做一個大畫廊這樣可以節省時間和resorces）

來源

2013-01-02 00:55:48

懸停時如何將圖標從灰色變爲全綵色？

回答

相關問題