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/

combinedArray: (
    "STEVE JOBS",
    "TONY STARK",
    "SANSA STARK",
    "BILL GATES"
) ...

Answer 3

你可以这样做

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

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

Answer 4

我一直在使用这个jquery插件：https://github.com/karlhorky/gray用于图像灰度。它易于使用和实现，因为您只需要为图像添加灰度类，或者为悬停效果添加灰度灰度淡入淡出。我在may项目中使用过这个插件，因为css过滤器在所有浏览器中都不起作用，主要是Internet Explorer，我已经检查过很多灰度插件，找到真正完成工作的那个，我就是这样。一直坚持这个。

希望有所帮助

悬停时将徽标更改为颜色

4 个答案: