NATUMEGU.com

この記事の詳細を見る >>

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>