cssのみで簡単にロールオーバーを実現する方法

ロールオーバーを実現するには、
さまざまな方法があるかと思います

ボタンなどを画像でつくり、
ロールオーバーをするには、1枚画像で背景の位置を変えたり
2枚画像を用意して差し替えたりしていました。

でも、透明度を変えるこの方法なら
簡単にロールオーバーさせることが出来て便利です。

書き方のサンプル

HTML

<p class="hover"><img src="sample1.jpg" alt="sampleボタン1" /></p>
<p class="hover"><img src="sample2.jpg" alt="sampleボタン2" /></p>

CSS

.hover a:hover img{
	opacity:0.35;
	filter: alpha(opacity=35);
	-ms-filter: "alpha( opacity=35 )";
	background: #fff;
}

コレだけです。
IE6でも動作します。

この記事に関連する記事

コメントをどうぞ