將圖標更改爲鼠標懸停上的圖片

-3

正如標題所示，我正在嘗試製作一個小CSS（或javascript）動畫，以將圖標更改爲鼠標懸停上的圖片，在此特定情況下，它不需要例如，我有一個白色的谷歌圖標，我想要的是當用戶將它懸停在它上面，以便更改爲實際的徽標或至少是實際的顏色。將圖標更改爲鼠標懸停上的圖片

PS：如果你想出一種選擇性的繪製圖標的方式，它並不需要是CSS或Javascript動畫或圖像。

由於提前，

Tiferrei

來源

2016-01-22 Tiago Ferreira

還有，你做了嗎？ – Phiter

問題要求我們推薦一種技術或找到一本書，工具，軟件庫，教程或其他非本地資源，這些問題都是堆棧溢出 –

圖標和圖片之間的區別是什麼？ –

我想你正在尋找類似的東西：

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<style> 
 
#aaa:hover i:before {content:url("https://www.google.com/logos/doodles/2016/wilbur-scovilles-151st-birthday-6275288709201920-res.png");} 
 
</style> 
 
<div id="aaa"><i class="fa fa-apple skills-icon"></i> test</a>

來源

2016-01-22 21:23:42

謝謝！確切地在現場！ –

順便說一句，如果我想編輯圖像的大小怎麼辦？它似乎並不遵守寬度和高度規則，我只是最終得到一個小圖標，然後突然變成一個巨大的圖像取代它。 –

@TiagoFerreira http://stackoverflow.com/questions/27276399/how-can-i-set-size-of-css-content-image –

我認爲你正在尋找做這樣的事情：如果您使用的字體真棒圖標this似乎是一個很好的例子，以

<style> 
    #yourID { 
    background-image: url('image1.png'); 
    } 
    #yourID:hover { 
    background-image: url('image2.png'); 
    } 
<style>

如何打開懸停。

來源

2016-01-22 20:47:08

種，它的東西是一個字體真棒圖標，例如，''，那麼我可以將背景圖像應用於字體圖標嗎？ –

是的，但問題是，我需要的就像保持實際的圖標，只是改變它的顏色，以匹配實際的原始標誌，（如追逐谷歌白色圖標到相同的圖標，但着名的谷歌圖標顏色） –

什麼？你可以非常具體地問你在問什麼？你的問題看起來像你只需要在懸停時換掉字體圖標。現在你指的是「......我需要的就像保持真實的圖標......」。我不知道你想表達什麼意思。 –

將圖標更改爲鼠標懸停上的圖片

回答

相關問題