使用灰度时针对不透明度的悬停效果在 Firefox 中不起作用答案

【问题标题】：hover effect targeting opacity not working in firefox when using grayscale使用灰度时针对不透明度的悬停效果在 Firefox 中不起作用
【发布时间】：2013-06-01 17:51:11
【问题描述】：

当悬停在图像上时，我正在尝试更改图像的不透明度（具有应用灰度效果的彩色图像）。

悬停效果在 firefox 中不起作用，尽管 firefox 似乎能够结合灰度效果显示不同的不透明度。这是我的 CSS：

    #nav_current{
        filter: url(filters.svg#grayscale); /* Firefox 3.5+ */
        filter: gray; /* IE6-9 */
        -webkit-filter: grayscale(1); /* Google Chrome & Safari 6+ */
        opacity: .8;    
    }

    #nav_current:hover{
        opacity: 1;
    }

我也尝试使用更具体的不透明度：

        -webkit-opacity: 0.8;
        -moz-opacity: 0.8;
        filter:alpha(opacity=80);

但它仍然无法在 Firefox 中运行。

这是html：

<div id="nav_current" class="thumb_nav_side">
<img src="image.jpg" alt="description">
</div>

svg：

<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>

【问题讨论】：

灰度和所有其他 filter 属性仅适用于 webkit。
你能链接到显示问题的实际页面吗？
@N1xx1 你确定吗？因为除了悬停效果之外，灰度在firefox中工作
对不起，我错过了firefox的代码部分。
@BorisZbarsky 抱歉，目前不可能。我在我的问题中添加了 html。

标签： css firefox hover opacity grayscale

【解决方案1】：

这看起来像 https://bugzilla.mozilla.org/show_bug.cgi?id=861042，应该在 Firefox 23 中修复（由于 8 月初发布）。至少该行为与该描述相匹配，并且它在 Firefox nightlies 中从具有该错误修复的那个开始。

基本上，当对象还应用了 SVG 过滤器（或剪辑）时，Gecko 不会因不透明度更改而失效....

如果你能忍受到 8 月，问题就会自行解决。

【讨论】：