Simple HTMLHTMLリファレンス

Main Menu

おすすめリンク

Site Info.

HTMLリファレンス

CSSリファレンス

その他の記事

CSSリファレンス インデックス

スポンサーリンク

CSSリファレンス

擬似クラスPseudo-classesTOPCSSSelectorPseudo-class

  1. E:linkリンク擬似クラス
  2. E:visitedリンク擬似クラス
  3. E:lang(fr)言語擬似クラス
  4. E:first-child構造擬似クラス
  5. E:activeユーザーアクション擬似クラス
  6. E:focusユーザーアクション擬似クラス
  7. E:hoverユーザーアクション擬似クラス

hover 擬似クラスThe user action pseudo-class

書式CSSバージョン個別性W3C 仕様書
E:hoverCSS2.11CR
擬似クラスについて

hover擬似クラスは、特定の要素にマウスオーバーされた状態に対して適用されるセレクタです。リンク要素の上にマウスオーバーした際の、テキストや背景のデザインの指定に用いられることが多く、使用頻度の高いセレクタです。

擬似クラスの書式

hover擬似クラスは、仕様上は対象要素を限定していません。全ての要素に対して適用することができます。

:hover		{ ... }		ユーザーが選択可能な全ての要素
*:hover		{ ... }		(上に同じ)
a:hover		{ ... }		全てのa要素
textarea:hover	{ ... }		全てのtextarea要素
擬似クラスの記述順 [LVHA]

link、visited、hover、activeの4つの擬似クラスは、それぞれの個別性が同じであり、記述順序によってはうまく動作しない場合があります。 例えばhoverの後にvisitedを記述すると、後から記述したvisitedが上書きされるため、マウスオーバーした場合でもスタイルが変化しないといったケースです。 このような不具合を避けるために、擬似クラスはLVHA(link、visited、hover、activeの頭文字)の順序で記述するのが良いとされています。

a:link		{ color: blue; }	未訪問リンク
a:visited	{ color: purple; }	訪問済みリンク
a:hover		{ color: red; }		マウスオーバー時のリンク
a:active	{ color: yellow; }	アクティブ状態(訪問中)のリンク
スポンサーリンク
Copyright (C) 2010 Simple HTML. All Rights Reserved.