Issues Arising From Arbitrary-Element hover

Summary: Thanks to long-standing limitations, we're used to thinking of hover styles as applying only to hyperlinks, which has led to some sloppy authoring practices that are now causing problems for some Web sites. This technote explains the source of the problems and how to avoid encountering them. 多くの Web ページ作者は、CSS2 の :hover 疑似クラスをリンクのスタイル付けに利用しています。始めに Microsoft Internet Explorer で導入され、その後 CSS 仕様書に採用されたこの新機能は、リンク文字列に対して (特に JavaScript による "ロールオーバー" のような外観や動作をもたらす) スタイルを設定するものとして一般的です。しかしブラウザの CSS サポートが進歩して、一部のページでは hover が想定外の積極的な動作をするようになりました。

hover とリンクではない要素

CSS2 のセクション 5.11.3 では 3 種類の疑似クラス (:hover, :active, :focus) を定義し、それらは以下のように動作するとしています:

CSS doesn't define which elements may be in the above states, or how the states are entered and left. Scripting may change whether elements react to user events or not, and different devices and UAs may have different ways of pointing to, or activating elements.

Web ページ作者はこれらの疑似クラスがハイパーリンクにのみ適用されるという考えに慣れていますが、CSS2 ではそのような制限を行っていません。理論上はどの要素も 3 つの疑似クラスの状態になることができ、また同様にそれらの状態へスタイルを適用することができます。この考えは、伝統的に事実ではないとされていました。

単独の疑似クラス

"単独の" 疑似クラスをセレクタとして用いた結果について考えると、第 2 の問題点が見えてきます。例えば:

:hover {color: red;}

これは以下の CSS2 規則と同等です:

*:hover {color: red;}

これは "すべての要素について、hover 状態であるときに前景色を赤色にする" と解釈されます。従って段落・表・見出しなど文書内の全要素は、hover 状態の時に文字列が赤色になるでしょう。

単独のクラスセレクタと hover 疑似クラスを合わせて用いたときにも同様の相違点があります:

.nav:hover {color: red;}

class 属性の値が nav であるものの実体がハイパーリンクのみである状況では、この規則は正常に動作します。 しかし、このような規則は通常、以下のようなマークアップとの組み合わせで見られます:

<td class="nav">
<a href="one.html" class="nav">one</a> | 
<a href="two.html" class="nav">two</a> | 
<a href="thr.html" class="nav">three</a> | 
<a href="fou.html" class="nav">four</a>
</td>

表のセルの class 属性の値が nav であるため、ユーザがマウスポインタを表のセル内に動かすと縦線の記号が赤色になります。このとき、リンクも同様に赤色になります。

Gecko の動作

Netscape Gecko のビルド 20020410 以降を基にしたブラウザ (Netscape 6.1+) は、:hover のスタイルを文書内のすべての要素に適用することができます。従って Web ページ作者が単独の疑似クラスまたは単独のクラスセレクタと疑似クラスを使用している場合は、hover のスタイルがリンク以外の部分にも適用されるおそれがあります。もっとも確実な修正法は、以下のようにセレクタへアンカー要素を追加することです:

a:hover {color: red;}
a.nav:hover {color: red;}

過去の文書で問題が発生することを防ぐために、Mozilla 1.0 以降を基にしたブラウザ (Netscape 7+) では文書が "quirks" モードで表示されるときに、単独の疑似クラスの適用先をリンクのみに制限する機能を備えています。Mozilla 1.3b 以降を基にしたブラウザでは、同モードでの調整が単独のクラスセレクタと :hover 疑似クラスの組み合わせも含むよう拡張されました (詳細は バグ 169078 を参照)。

name 属性を持つアンカーの問題

これまでに述べた問題点に加えて、同様に Web ページの作者が予期しない形でスタイルが適用される状況が 2 点あります。ひとつは妥当性確認により簡単に修正されますが、もう一つはやや複雑です。

始めに、Web ページ作者が name 属性つきのアンカータグを置いたが閉じるタグがない場合の問題です。例えば:

<a name="pagetop">
<h2>My Page</h2>

</a> タグがないと、実質的にこの名前付けは文書の残りすべてを包含します。これは通常、文書の残りすべてが hover スタイルを採ることを意味します。この状況で以下の規則の効果を考えてみます:

a:hover {color: red;}

name 属性を持つ閉じられていないアンカーを含む文書では、アンカー以降の文字列すべてが赤色になります (他に影響する CSS 規則がある場合を除く)。

また以上の点から、name 属性を持つアンカーが hover スタイルを受け入れてしまうという第 2 の問題が見えてきます。Web ページ作者は a:hover セレクタがハイパーリンクにのみ適用されると考えているでしょう、しかしこのセレクタは単純に hover 状態であるすべての a 要素にスタイルを設定するものですから、スタイルは name 属性を持つアンカーにも適用されます。この問題を回避するために、Web ページ作者は CSS2 で説明されている複合的な疑似クラスを使用するとよいでしょう:

a:link:hover {color: red;}
a:visited:hover {color: maroon;}

この構文では未訪問のリンクと訪問済みのリンクそれぞれに、異なる hover 状態のスタイルを設定できることに注意してください。これは、単に a:hover とするだけでは不可能でした。また、a:link:hover というセレクタは未訪問のリンクにのみ適用されますので、未訪問と訪問済みの両方に同じ hover 状態のスタイルを設定したい場合は、1 つの規則に対して上記 2 つのセレクタを指定してください。

推奨事項

予期しない問題を避けるために Web ページ作者は、ハイパーリンクに適用しようとする動的状態を示す疑似クラスに、要素名も含めることを強く推奨します。加えて、複合的な疑似クラスは hover 状態のスタイルがハイパーリンクではないアンカーに適用されてしまうことを防ぎます。従って、単に :hover とするのではなく a:hover を常に使うようにしてください。また、a:hover よりも a:link:hover (および a:visited:hover) が好ましいです。

関連リンク

• The dynamic pseudo-classes: :hover, :active, and :focus
• :hover Pseudo-class (MSDN)