-1

因此，我在我的 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 浏览器修复和优化此问题的任何建议？

4

2 回答 2

0

我自己从来没有使用过这个，但不是你使用的是 Firefox 不支持的 webkit 过滤器的问题。我做了一个快速的谷歌，看起来你需要 -moz-filter: grayscale(100%); 请参阅下面的链接。

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

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

于 2013-09-08T10:15:21.203 回答
0

Firefox 上仍然不支持 CSS 过滤器，请在此处查看

但是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上查看工作演示

于 2013-09-08T10:12:00.697 回答