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

擬似クラスについて

よくリンク文字にカーソルを当てたときに色が変わるのを目にするかと思いますが、それは、<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の後に:（コロン）＋擬似クラス名」です。

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

Lesson3～CSSを使った装飾～

• htmlの骨格を作成する
• CSS（スタイルシート）の組込み方法
• CSSの基本構造
• @規則の指定
• 文字の大きさを変える
• 文字・背景の色を変える
• 文字のスタイルと太さを変える
• 幅と高さを変える
• 間隔と枠線を指定する
• カーソルを当てたときのリンクの色

コメントor補足情報orご指摘あればをお願いします。

• << 前のページ
• 次のページ >>