在悬停时将徽标更改为颜色

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

您可以使用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 3

你可以这样做

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

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