カーソルを当てたときのリンクの色

ドリル式ホームページの作り方TOP  >>  Lesson3〜CSSを使った装飾〜  >>  カーソルを当てたときのリンクの色

カーソルを当てたときのリンクの色

擬似クラスについて

よくリンク文字にカーソルを当てたときに色が変わるのを目にするかと思いますが、それは、<a>タグに対して、擬似クラス（link,visited,hover）を適用したことによるものです。

• link擬似クラスは、未訪問のa要素のリンクのみに適用される。
• visited擬似クラスは、訪問済みのa要素のリンクのみに適用される。
• hover擬似クラスは、マウスポインタがリンク文字の上に置かれているときに適用される。
• active擬似クラスは、マウスボタンを押して離すまでの間適用される。
• focus擬似クラスは、キーボードイベントやテキスト入力フォームが行われている間適用される。

うち、link,visited,hoverの3つはこの順番で（順不同は×）よく使用されます。記述の仕方は「aの後に:（コロン）＋擬似クラス名」です。

a:link {
color:#00f; */ 未訪問のリンクの色 */
}
a:visited {
color:#00f; */ 訪問済みのリンクの色 */
}
a:hover {
color:#005; */ マウスポインタが上にあるときのリンクの色 */
}

うち、link,visited,hoverの3つはこの順番で（順不同は×）よく使用されます。記述の仕方は「aの後に:（コロン）＋擬似クラス名」です。

上の記述を加えて完成！サンプルはコチラ→サンプル（ホームページ作成講座）

---

• ドリル式ホームページの作り方TOP

Copyright(C) ドリル式ホームページの作り方 all right reserved.