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

您用于Firefox的filter效果似乎非常复杂。所有现代浏览器现在都应该能够使用CSS3表示法，但可以使用稍微较旧的浏览器的特定选择器;

您可能需要为您的Firefox版本使用-moz选择器。

所有浏览器的完整列表如下;

img {
    filter: grayscale(0);
    -webkit-filter: grayscale(0);
    -moz-filter: grayscale(0);
    -o-filter: grayscale(0);
    -ms-filter: grayscale(0);
}

img:hover {
    filter: grayscale(1);
    -webkit-filter: grayscale(1);
    -moz-filter: grayscale(1);
    -o-filter: grayscale(1);
    -ms-filter: grayscale(1);
}

希望这有帮助。

Answer 2

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

Answer 3

感谢您的帮助，但这并没有解决我的问题。你的答案对我有用。现在悬停效果只在一个解决方案中起作用，图片现在是彩色的，当我悬停它时它变成黑白色。我需要相反，图片必须是黑白色，当我悬停它时，它必须是彩色的。

Answer 4

尝试JS修复

使用javascript检测浏览器并创建画布，然后使用过滤器。

http://www.majas-lapu-izstrade.lv/cross-browser-grayscale-image-example-using-css3-js/

Firefox和Firefox中的悬停效果IE

4 个答案: