【世界一カンタン？！】１枚の画像だけでロールオーバーをさせる方法

画像のロールオーバーって面倒ですよね。

２枚の画像を用意してJavascriptで制御して、、や背景画像していしてh overで、、
というのが一般的ですが、
今回は画像１枚だけ。CSSに４行記載するだけで使用できる方法を紹介します。

正確にはCSSでアルファ値を調整し透明度を変えることで
白のロールオーバーっぽく見せるというもので

opacityで透明度を変更します。

＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
.rollover a:hover img{
opacity:0.6;
filter: alpha(opacity=60);
-ms-filter: “alpha( opacity=60 )”;
}
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊

これでclass名に「rollover」を指定した下に[a]タグ>[img]が入れば自動でロールオーバーします。

たったこれだけですぐにロールオーバーが使用できますのでぜひお試し下さい。

＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊