CSSでロールオーバー風の表現をするための方法です。
画像を使用してjavascriptでロールオーバーをさせるというのは古典的なサイトで多く見られる手法ですが、CSSを使ってもテキストにロールオーバーの表現をさせることができます。
実際のソースの書き方
xxxというクラスで、ロールオーバー風表現(背景画像を白から黒に変化)をさせる場合です。
.xxx {
margin:0px;
padding:0px;
}
.xxx a {
padding:5px;
color:#FFFFFF;
background-color:#000000;
text-decoration:none;
}
.xxx a:hover {
color:#000000;
background-color:#FFFFFF;
}
「使用例」
MacでWeb制作
疑似クラスのhoverを使う事で、ロールオーバー風の表現にしています。
基本は.xxx aで設定して、ロールオーバーをさせる時の表現を、hoverで設定しています。hoverでborderの設定を加えるとよりボタンぽくなります。
当サイトでも左側のナビゲーションや各種リンクテキストに使用している手法です。
- サイト
