cssだけで画像のロールオーバーを実現する [IE6対応]


HTMLコーディングで、ボタン画像のロールオーバーを作っていると色々と面倒くさいのです。そんな時に、よく使う画像のロールオーバーをcssのみで実現できるの方法です。

まずcss側に↓を記述。

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

次にHTMLの<img>タグを↓のように

<img src="xxx" class="hover" />

これで↓のようにオンマウスの時に画像が80%の薄さになるのでハイライトしたように見えます。

 

 

また、いちいち画像にclass=”hover”なんて書くのが面倒くさい!
<div id=”mainBody”>内の画像全てに適応したい!という時は、

css側に↓を記述すれば実現可能です。

#mainBody a:hover img{
opacity:0.8;
filter:alpha(opacity=80);
-ms-filter: "alpha( opacity=80 )";
}
/*ロールオーバーしたくない画像用*/
#mainBody a:hover img.noHover{
opacity:1;
filter:alpha(opacity=100);
-ms-filter: "alpha( opacity=100 )";
}

HTMLはこう。↓

<div id="mainBody">
<img src="xxx" />
<!-- ↓ロールオーバーを適応したくない画像-->
<img src="xxx" class="noHover" />
</div> 

この記事を書いた人:

ナカシマ

北区赤羽在住のWEBデザイナー兼エンジニア。インターネット、WordPress、本・漫画、音楽が大好き。妻と猫と暮らすアップル信者。

BLOG: 着ぐるみ追い剥ぎペンギン