トップ > スタイルシートテクニック > ロールオーバーリンク

ロールオーバーリンク

スポンサード リンク
ロールオーバーリンクとは、カーソルが触れると色などが変化するリンクの事です。
これを使うと、その部分がリンクである事がよく分かります。
また、工夫をすると色々な面白い効果を付ける事が出来ます。

記述方法は以下の通りです。
a:hover { 属性 : 値; }
見て分かるように、「a:hover」は属性ではなくセレクタ(クラス)です。
これは疑似クラスや定義済みクラスと呼ばれていて、アンカー(リンク)タグ<a>が特定の状態にある時のスタイルを指定する事が出来ます。
この他に「:link(未訪問)」や「:visited(訪問済み)」、「:active(アクティブ)」などがあります。

当サイトでもこのロールオーバーを使っています。
リンク部分にカーソルを合わせるとリストマークの色が変わったりアンダーラインが付いたりするのが分かると思います。