Question

所以我在我的Wordpress网站上使用CSS图像悬停效果在Chrome中完全正常，但它在Firefox或Opera中根本不起作用（当我将图像鼠标悬停在这些浏览器中时没有任何反应）。

我已经阅读过有关可能存在的问题并且可能与div类冲突了吗？我不确定。

这是CSS：

::-moz-selection {
    background-color: #888;
    color: #fff;
}

::selection {
    background-color: #888;
    color: #fff;
}

/*B&W*/
.bw {
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    -ms-transition: all .5s ease;
    transition: all .5s ease;
}

.bw:hover {
    -webkit-filter: grayscale(100%);
}

.pic {
    float: left;
    margin: 20px;
    overflow: hidden;
}

，这是HTML：

<div class="bw pic"><a href="http://www.flickr.com/example"><img class="wp-image-998 alignnone" title="Example"alt="Example" src="http://www.flick.com/example.jpg" width="550" height="386" /></a></div>

示例的只是填充程序。

有关如何为Firefox和Opera浏览器修复和优化此内容的任何建议吗？

Answer 1

仍然没有支持firefox上的CSS过滤器，请检查 here

但是在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");

您可以在 JSFIDDLE

上查看工作演示

Answer 2

我自己从未使用过这个问题但是你使用的是webkit过滤器并不是firefox不支持的问题。我做了一个快速谷歌，看起来你需要-moz-filter：灰度（100％）;见下面的链接。

http://pixelhunter.me/post/25782670606/css3-grayscale

不确定以下答案是否更适合与旧浏览器的兼容性。

我的CSS图像悬停效果在Firefox或Opera中不起作用

2 个答案: