ロールオーバー画像02
マウスオーバーをCSSのみで表現。
JavaScriptを使用したマウスオーバーが一般的だが、CSSのみの方がシンプルにタグを記述できるのでお勧めです。
メンテナンス性も良いので使う価値が大きいと思います。
【準備】
ロールアウト・ロールオーバーの画像を用意する。一枚の画像で用意した方が画像表示位置の変更のみで表現出来るのでお勧めです。
【CSSの記述】
ナビゲーションの場合は画像一つ分のwidthを指定して、hover疑似クラスでポジションを指定する。
a#navi01 {
display:block;
width:100px;
height:30px;
text-indent:-9999px;
background:url(画像リンク先) no-repeat 0 0;
}
a#navi01:hover {
background:url(画像リンク先) no-repeat 0 -30px;
}
