2014年11月1日

IE8対応!opacityの書き方について

opacity

オンマウス時などに透明度を変更できる「opacity」。便利なのですが、IE8に対応させようとした時にうまくいかない時があったので、その時の対処法を掲載します。

HTML

画像+リンクという動作で、HTMLはこのように記述していました。

CSS

「.opacity」は下記のように記述します。

.opacity a:hover{
	opacity: 0.6;
	filter: alpha(opacity=60);
	-ms-filter: "alpha(opacity=60)";
	-khtml-opacity: 0.6;
	-moz-opacity: 0.6;
}

【参考画像】

rikugien.jpg

この書き方でほとんどのブラウザでは「画像にオンマウスした状態で画像が半透明になる」という動作になるかと思いますが、IE8はこの書き方だと半透明になりません。
そこで、下記のように記述を変更します。

修正後のCSS

.opacity img:hover{
	opacity: 0.6;
	filter: alpha(opacity=60);
	-ms-filter: "alpha(opacity=60)";
	-khtml-opacity: 0.6;
	-moz-opacity: 0.6;
}

【参考画像】

rikugien.jpg

この書き方ならIE8でもオンマウス時に画像が半透明になります。最新ブラウザの挙動だとopacityは子要素まで含めて効くのですが、IE8だけは指定した要素にのみ効くようで、「img」のhoverに対してopacityを指定する事で解決しました。

以上、IE8に対応したopacityの書き方でした。

, ,

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です