[CSS]マウスカーソルをのせた時に画像の透明度を変更する

リンクを張っている画像にマウスをのせた時、選択しているように簡単に表現する方法をご紹介します。

今回やりたいことはこんなことです。

スタイルシートで画像の透明度を変更する

スタイルシートを使えば、マウスをのせた時に画像の透明度を簡単に変更することができます。

マウスをのせた時に画像に変化が発生して欲しい時、つまりリンク先がある場合ということになります。

画像にリンクを張る場合のHTMLは以下のようになります。

<a href="http://isket.jp"><img src="isket.png" /></a>

aタグの中身のimgタグにマウスをのせた時(=hover)に変更したいので、スタイルシートは次のようになります。（0.8と指定すると80%の透明度を指定することになります）

a:hover img {
    opacity: 0.8;
}

以上です。とても簡単にできます。しかし。。。

IEはopacityに対応していない！IEに対応する方法は？

やっぱりIE対応が別途必要でした。なので、IEも含めて対応する方法は以下のようになります。

a:hover img {
    opacity: 0.8;
    filter: alpha(opacity=80);
    -moz-opacity: 0.8;
}

スタイルシートやJavaScriptを使うと、IEだけのために別途対応が必要な時が多くあります。

IEに対応するためにコストも大きくなってしまいます。IE未対応で使って頂けるとコストもお安くできるのですが。。。なかなかそういうわけにもいかないのが現状です。

本日は以上です。