CSSでのセレクタ(選択子)の一つである、:hover擬似クラスに関して解説します。
:hover擬似クラスとは:hover擬似クラスの使用上の注意 (平成18年 7月18日 訂正):hover擬似クラスのPC向けユーザエージェントでの実装上の注意:hover擬似クラスのWAP 2.0での実装上の注意:hover擬似クラスとは。:hover擬似クラスとは、当該要素上に閲覧者がカーソルを合わせている状態のみ対象とする擬似クラスセレクタです。
この擬似クラスは、仕様上は特に対象となる要素を限定しておりません。
:hover擬似クラスの書式。:hover擬似クラスの書式は、
セレクタ:hover
です。
ここで、セレクタ
としては任意のものが使えますが、対象要素を問わない場合なら全称セレクタ(汎用セレクタ)を省略出来ます。
:hover擬似クラスの使用上の注意。(平成18年 7月18日 訂正):hover擬似クラスと
を併用する場合は、意味上の理由から、必ず以下の順序に従って記述して下さい。
:link擬似クラスまたは:visited擬似クラス:hover擬似クラス:active擬似クラスこの順序を守らないと無効になってしまいます。
:hover擬似クラス:active擬似クラス:focus擬似クラスはいずれもリンクのアンカーを表す要素では無いため、
の前にこれらの擬似クラスが書かれていると、後方の:link擬似クラスまたは:visited擬似クラスが無意味と見なされてしまうからです。
また、
:hover擬似クラスまたは:focus擬似クラス:active擬似クラスの前後関係も、:active擬似クラスが前に来ると意味がありません。
なぜなら、:active擬似クラスの定義から、:active擬似クラスとなる要素は、必ず:hover擬似クラスまたは:focus擬似クラスのどちらかの状態になっている筈だからです。
:hover擬似クラスの実装上の注意。:hover擬似クラスのPC向けユーザエージェントでの実装上の注意。:hover擬似クラスは、
には実装されておりません。
また、
でも:hover擬似クラスの挙動がおかしい場合があります。
:hover擬似クラスのWAP 2.0での実装上の注意。WAP 2.0では、:hover擬似クラスは仕様に含まれておりません。
