:hover擬似クラス。
CSSでのセレクタ(選択子)の一つである、:hover擬似クラスに関して解説します。
:hover擬似クラスとは。
:hover擬似クラスとは、当該要素上に閲覧者がカーソルを合わせている状態のみ対象とする擬似クラスセレクタです。
この擬似クラスは、仕様上は特に対象となる要素を限定しておりません。
- 例えば、<tr>要素に適用すれば、表にマウスカーソルを当てると当該行のスタイル(背景色など)を変える事が出来ます。
: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擬似クラスは、
- ネットスケープ 4.x
には実装されておりません。
また、
- オペラ 6.x
でも:hover擬似クラスの挙動がおかしい場合があります。
:hover擬似クラスのWAP 2.0での実装上の注意。
WAP 2.0では、:hover擬似クラスは仕様に含まれておりません。