我正在处理一个网页，如果您将鼠标悬停在图像上，它会去饱和。它适用于 Chrome 和 IE。但是，我无法过渡到在 FF 中工作，并且它在 Opera 中根本没有去饱和。
这是我的代码：
<!DOCTYPE html>
<head>
<style type="text/css">
img:hover {
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'saturate\' values=\'0.0\'/></filter></svg>#grayscale"); /* Firefox */
filter: gray; /* IE */
-moz-filter: grayscale(100%);
-o-filter: grayscale(100%);
-webkit-filter: grayscale(1); /* Webkit */}
img {
-webkit-filter: grayscale(0);
-moz-filter: grayscale(0);
-o-filter: grayscale(0);
filter: none;
filter: grayscale(0);}
img.transition {
-moz-transition: all 0.5s ease-in-out; /* FF */
-o-transition: all 0.5s ease-in-out; /* Opera 10.5 */
-webkit-transition: all 0.5s ease-in-out; /* Webkit */
transition: all 0.5s ease-in-out;}
</style>
</head>
<html>
<body>
<img src="http://www.wallpapershd.biz/wallpapers/2012/12/Cardinal-Bird-1024x1280.jpg" width="500" class="transition" />
</body>
</html>
我见过类似的问题，但我是初学者，所以答案有点抽象；您不必自己向我提供代码，而是向我指出一个我可以理解的详细答案。如果有人可以帮助我，那就太好了。