Css 当使用灰度时,针对不透明度的悬停效果在firefox中不起作用

Css 当使用灰度时,针对不透明度的悬停效果在firefox中不起作用,css,firefox,hover,opacity,grayscale,Css,Firefox,Hover,Opacity,Grayscale,我试图改变一个应用灰度效果的彩色图像的不透明度,当鼠标悬停在它上面时 悬停效果在firefox中不起作用,尽管firefox似乎能够结合灰度效果显示不同的不透明度。这是我的CSS: #nav_current{ filter: url(filters.svg#grayscale); /* Firefox 3.5+ */ filter: gray; /* IE6-9 */ -webkit-filter: grayscale(1); /* Goo

我试图改变一个应用灰度效果的彩色图像的不透明度,当鼠标悬停在它上面时

悬停效果在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>
这看起来应该在Firefox23中修复,因为它将在8月初发布。至少这种行为符合这种描述,而且它在Firefox夜间版中也能正常工作,从一个有错误修复的版本开始

基本上,Gecko在对象还应用了SVG过滤器或剪辑时,不会因不透明度的变化而失效


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

Grayscale和所有其他过滤器属性都是webkit-only。你能链接到显示问题的实际页面吗?@N1x1确定吗?因为除了悬停效果之外,灰度在firefox中也起作用。对不起,我错过了firefox的部分代码。@BorisZbarsky sry,目前不可能。我在问题中添加了html。