Firefox 和 IE 中的悬停效果答案

【问题标题】：Hover effect in Firefox & IEFirefox 和 IE 中的悬停效果
【发布时间】：2014-11-09 12:44:57
【问题描述】：

所以，我有图片悬停效果的代码。它在 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 上的悬停效果应该怎么做呢？图片以黑白显示，当您将鼠标悬停时，它们应该会出现颜色。

【问题讨论】：

标签： css firefox hover

【解决方案1】：

尝试 JS 修复

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

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

【讨论】：

【解决方案2】：

您用于 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);
}

希望这会有所帮助。

【讨论】：

感谢您的帮助，但这并没有解决我的问题。要么你的答案对我有用。现在悬停效果仅适用于一种解决方案，图片现在是彩色的，当我悬停时它变成黑白。我需要相反，图片必须是黑白的，当我悬停它时，它必须是彩色的。
在这种情况下，将所有 0 更改为 1，反之亦然。我已经更新了我的答案以反映这一点。

【解决方案3】：

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

【讨论】：

【解决方案4】：

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+ */

顺便说一句，对“Firefox Grayscale”的简单谷歌搜索结果是 StackOverflow 对您的问题的回复。前阵子defau1t回复了：

CSS Filter not working in Firefox

【讨论】：