色付きの（そしてリンクになる）アイコンを取得し、ユーザーがアイコンの上にマウスを置くまで（画像に色を付ける）グレースケールに変えたいと思っています。
これは可能ですか？IEとFirefoxがサポートされている方法でですか？
回答:
これを実現する方法はたくさんありますが、以下にいくつかの例を示します。
img.grayscale {
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"); /* Firefox 3.5+ */
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
}
img.grayscale:hover {
filter: none;
-webkit-filter: grayscale(0%);
}
あなたは見つけることができ、ここで、この技術に関連した記事を。
このアプローチでは、画像の2つのコピーが必要です。1つはグレースケールで、もう1つはフルカラーです。CSS :hoverpsuedoselectorを使用すると、要素の背景を更新して、次の2つを切り替えることができます。
#yourimage {
background: url(../grayscale-image.png);
}
#yourImage:hover {
background: url(../color-image.png};
}
これは、jQueryのhover()関数などのJavascriptベースのホバー効果を同じ方法で使用することによっても実現できます。
非飽和のライブラリを使用すると、簡単に特定の要素や画像のグレースケールバージョンとフルバージョンの色を切り替えることができます一般的なライブラリです。
ここで回答：HTML / CSSで画像をグレースケールに変換する
苦痛や画像操作ライブラリのように聞こえる2つの画像を使用する必要はありません。クロスブラウザサポート（現在のバージョン）を使用して、CSSを使用するだけで使用できます。これはプログレッシブエンハンスメントアプローチであり、古いブラウザのカラーバージョンにフォールバックします。
img {
filter: url(filters.svg#grayscale);
/* Firefox 3.5+ */
filter: gray;
/* IE6-9 */
-webkit-filter: grayscale(1);
/* Google Chrome & Safari 6+ */
}
img:hover {
filter: none;
-webkit-filter: none;
}
そして次のようなfilters.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>
私はhttp://www.diagnomics.com/で次のコードを使用しています
拡大効果のある白黒からカラーへのスムーズな移行（スケール）
img.color_flip {
filter: url(filters.svg#grayscale); /* Firefox 3.5+ */
filter: gray; /* IE5+ */
-webkit-filter: grayscale(1); /* Webkit Nightlies & Chrome Canary */
-webkit-transition: all .5s ease-in-out;
}
img.color_flip:hover {
filter: none;
-webkit-filter: grayscale(0);
-webkit-transform: scale(1.1);
}