画像にカーソルを合わせると彩度が下がる Web ページに取り組んでいます。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>
同様の質問を見たことがありますが、私は一種の初心者なので、答えは少し抽象的でした。自分でコードを提供する必要はありませんが、私が理解できるやや詳細な回答を教えてください。誰かが私を助けることができれば、それは素晴らしいことです.