:hover疑似クラス

:hoverは、カーソルを乗せた時のリンクのスタイルを指定する疑似クラスです。

解説

基本的にaタグと合わせて使用します。
また、リンクに関する以下４種類の疑似クラスと同時に使われることが多いです。

• :link：未訪問のリンクのスタイルを指定する
• :visited：アクセス済みのリンクのスタイルを指定する
• :hover：カーソルを乗せた時のリンクのスタイルを指定する
• :active：クリック中のリンクのスタイルを指定する

構文

構文は以下になります。

要素の箇所はHTMLタグが入りますが、基本的にaタグになります。

サンプル

aタグに疑似クラスを設定する

/* 未アクセスリンク⇒青 */
a:link {color:#0000ff;}

/* アクセス済みリンク⇒赤 */
a:visited {color:#ff0000;}

/* カーソルが乗っているリンク⇒黄色 */
a:hover {color:#ffff00f;}

/* 押下中のリンク⇒緑 */
a:active {color:#00ff00;}

<a href="tanuki.html">たぬき</a>

備考

• :link、:visited、:hover、:active を定義するときは、この順序で指定してください。

関連項目

• :link：未訪問のリンクのスタイルを指定する
• :visited：アクセス済みのリンクのスタイルを指定する
• :hover：カーソルを乗せた時のリンクのスタイルを指定する
• :active：クリック中のリンクのスタイルを指定する

Tweet