css - Firefox 和 IE 中的悬停效果

Question

所以，我有图片悬停效果的代码。它在 Chrome 上运行良好，但问题是当我在 Firefox 上打开网站时。这是代码:

img.img-responsive {

/* for Webkit browsere, Chrome 19+, Safari 6+ ... */
-webkit-filter: grayscale(1);

/* this is for Firefox 3.5+, Firefox mobile */
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'>
<filter id=\'gs\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 
0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/>
</filter></svg>#gs");

/* for IE6+ */
filter: gray;
}

img.img-responsive:hover {

/* for Webkit browsere, Chrome 19+, Safari 6+ ... */
-webkit-filter: grayscale(0);

/* this is for Firefox 3.5+, Firefox mobile */
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'>
<filter id=\'gs\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 
0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/>
</filter></svg>#gs");

/* for IE6+ */
filter: gray;
}

那么，我应该怎么做才能使悬停效果在 Firefox 上有效？图片以黑白显示，当您悬停它们时，颜色应该会出现。

Answer 1

filter: grayscale(100%) /* Or lower */

应该在最新版本的 Firefox 中工作。但话说回来，这就是 Firefox。

如果没有，请尝试用此替换您的“过滤器”网址:

filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */

顺便说一句，通过简单的 Google 搜索“Firefox Grayscale”，结果是 StackOverflow 对您问题的回复。 defau1t 回答了这个问题不久前:

CSS Filter not working in Firefox