kzms2 – html,css,javascript

下のようなボタン画像を

hover時（マウスカーソルが合った時）に画像をこれ以上用意せずに変化させるTipsです。
上のボタンにカーソルを合わせたら色が少し薄くなると思います。

対応ブラウザなど

CSS３は使用していません。対応ブラウザはIE5.5-IE8,Firefox3,Safari3,opera9などです。

ソースは続きに記載しておきます。

ソースコード（CSS)

a.alpha:hover img{
/*モダンブラウザ用*/
opacity:0.8;
/*IE7以下用*/
filter:alpha(opacity=80);
/*IE8用*/
-ms-filter:"alpha(opacity=80)";
}
※a.alpha imgの部分は、実際に適用する要素のidやclassを割り振ってください。
※a要素にhoverを割り当てているのは、IE6以下だとa要素以外にはhoverが効かないためです。

応用っぽいもの

応用と呼べるか判りませんが、逆に先に透過させておいて、カーソルを合わせたら透過をやめるというのもありかと思います。

a.alpha2 img{
opacity:0.8;
filter:alpha(opacity=80);
-ms-filter:"alpha(opacity=80)";
}
a.alpha2:hover img{
opacity:1;
filter:alpha(opacity=100);
ms-filter:"alpha(opacity=100)";
}

ちょっとした説明

これはopacityを使って半透明の状態にして、変化を出しています。
IEはちょっと独自の書き方をしないとだめなので上のようなソースになっています…

すでに知ってる方などもいるでしょうが、知らなかった方は是非頭の片隅に置いておいてみてください。

画像だけでなく、他の部分にも流用を効かす事が出来るので、簡単にマウスカーソルを合わせた時に反応させたいときは是非どうぞ。
個人的には画像を用意することなく、マウスに反応させる事が出来るのでお勧めです。