【CSS】透明度を変化させて画像一枚でロールオーバー
マウスホバー時、画像の透明度をcssのみで変化させてロールオーバーを実現する方法です。

CSS
a:hover img {
opacity:0.7;
filter:alpha(opacity=70);/*IE6,IE7*/
-ms-filter:"alpha(opacity=70)";/*IE8*/
zoom:1;
}
opacityプロパティで画像の透明度を変化させます。0.7は不透明度70%ということです。
しかし、opacityはIEでは反映されません。IE用にfilterプロパティを追加します。さらにIE8の為に-ms-filterプロパティも追加します。最後にわからんちんのIEに言うことを聞かせる魔法の言葉zoom:1;を加えて完成です。

コメントを残す