CSSで1枚のリンク画像ボタンをhover時に変化させる
下のようなボタン画像を
hover時(マウスカーソルが合った時)に画像をこれ以上用意せずに変化させるTipsです。
上のボタンにカーソルを合わせたら色が少し薄くなると思います。
対応ブラウザなど
CSS3は使用していません。対応ブラウザは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はちょっと独自の書き方をしないとだめなので上のようなソースになっています…
すでに知ってる方などもいるでしょうが、知らなかった方は是非頭の片隅に置いておいてみてください。
画像だけでなく、他の部分にも流用を効かす事が出来るので、簡単にマウスカーソルを合わせた時に反応させたいときは是非どうぞ。
個人的には画像を用意することなく、マウスに反応させる事が出来るのでお勧めです。





