HOME > blog > CSS > 擬似クラス:hover / :active / :focus

擬似クラス:hover / :active / :focus

CSSでロールオーバーを実現する場合、通常:hover擬似クラスを利用しますが、

User agents not supporting interactive media do not have to support this pseudo-class. Some conforming user agents supporting interactive media may not be able to support this pseudo-class (e.g., a pen device).

インタラクティブ媒体をサポートしていないUAがこの疑似クラスをサポートする必要は無い。また、インタラクティブ媒体に対応している適合UAでも、この疑似クラスをサポートできない場合がある(たとえばペンデバイス)。

とあり(引用文日本語訳)、要は訪問者の環境によっては”:hover”擬似クラスだけでは反映できない場合があることを意味しています。

例えばキーボードのtabキーでアンカーを順々に辿っていった際は:hover擬似クラスの効果は反映されません。GoogleChrome, Safari, Operaといったブラウザではこうした場合でも2-3ピクセル程度の枠でフォーカスされたリンクを示してくれますが、IE8, firefox3.6では1ピクセルの点線での表示となり非常に視認性が悪い状態となります。

tabキーでの選択はフォーカスされている要素に該当するので、

a:hover, a:focus { ... }

としておくと訪問者がポインティングデバイスで指し示しており、かつアクティブ状態ではない場合、及びキーボード動作によりフォーカスされている場合に対応可能となります。

訪問者の環境がペンデバイスなどの場合は普通、選択された要素はいきなりアクティブな状態になるので上の例にはa:activeも加えておいて良いのですが、:active:hover, :focusとは違いクリックし終えると次のアクションを実行してしまう状態にあるので、ロールオーバーを実現する際に:activeには:hover:focusとは異なる視覚効果を定義するのが妥当かと思います。

カテゴリー: CSS