画像のロールオーバーって面倒ですよね。
２枚の画像を用意して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]が入れば自動でロールオーバーします。
たったこれだけですぐにロールオーバーが使用できますのでぜひお試し下さい。
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
