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

2014年11月1日

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

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

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

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

【参考画像】

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

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

【参考画像】

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

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

素材の壺