將徽標更改爲懸停時的顏色

Question

我正在使用稱爲vigor的WordPress主題。我想知道我是否可以將我的標誌設爲灰色，一旦我將鼠標懸停在標誌上，它就會變成彩色版本。如何才能做到這一點。在我的主題菜單中，我有一個自定義CSS和jQuery的地方。我也有一個PNG版本。

Answer 1

是的，這是可能的！不需要單獨的PNG圖像。

您可以使用下面的代碼，用CSS濾鏡：

HTML：

<img id="logo" src="http://lorempixel.com/400/200/"> 

CSS：

#logo { 
    -webkit-filter: grayscale(100%); 
    -webkit-transition: .5s ease-in-out; 
    -moz-filter: grayscale(100%); 
    -moz-transition: .5s ease-in-out; 
    -o-filter: grayscale(100%); 
    -o-transition: .5s ease-in-out; 
} 

#logo:hover { 
    -webkit-filter: grayscale(0%); 
    -webkit-transition: .5s ease-in-out; 
    -moz-filter: grayscale(0%); 
    -moz-transition: .5s ease-in-out; 
    -o-filter: grayscale(0%); 
    -o-transition: .5s ease-in-out; 
} 

JSFiddle example

Answer 2

你可以像下面這樣做

#logo:hover { background-image:url('color-1.png') }

#logo { background-image:url('color-2.png') }

Answer 3

您可以使用CSS 3層的過濾器。嘗試這個。

https://jsfiddle.net/1fog16gn/

#sampleImage { 
    -webkit-filter: grayscale(100%); 
    -moz-filter: grayscale(100%); 
    -o-filter: grayscale(100%); 
} 

#sampleImage:hover { 
    -webkit-filter: grayscale(0%); 
    -moz-filter: grayscale(0%); 
    -o-filter: grayscale(0%); 
} 

Answer 4

我一直用這個這個jQuery插件：https://github.com/karlhorky/gray的圖像灰度。它很容易使用和實施，因爲您只需將灰度類添加到圖像或灰度灰度淡化懸停效果。我在五月份的項目中使用了這個插件，因爲css過濾器並不適用於所有的瀏覽器，主要是Internet Explorer，我已經檢查了很多灰度插件以找到真正完成工作的插件，我一直堅持這個。

希望它有幫助