:hover

:hover 擬似クラス

[10] :hover 擬似クラスは、指示装置 (pointing device) で指している要素に適用されます >>9

仕様書

意味

[11] この擬似クラス指示装置指して (designate) いる要素に適用されます。 指示装置を使うとその要素活性化させることができるかもしれませんが、 :hover活性化の有無には関係ありません。 >>9

[12] マウスを使っている場合、当該要素によって生成されたの上に指示子 (ポインター) があれば、 その要素を指しているといえます。 >>9

[13] 対話的媒体以外では対応する必要がありません。対話的媒体であっても、ペンしか接続されていないなど、 対応できないことがあります。 >>9

[30] 要素指している (designated) とは、次のいずれかの条件に合致することを言います >>29

[34] 選択子本体仕様ではなく HTML 仕様で規定されているため、 HTML利用者エージェントにのみ >>29 適用されるとされていますが、 実質的に実用的な実装すべてに該当します。 [14] :hover である要素親要素もまた :hover が適用されるか否かは選択子の仕様書では規定しないとなっています >>9[15] しかし実際にはWebブラウザー子孫要素:hover である要素についても :hover であるとみなしており、それを前提にしたスタイル・シートも一般的に使われています。
[35] label 要素被札付け制御子にまで適用されるのは互換性のためで、 おそらく :active の件を踏まえた CSS WG への配慮があるのでしょうが、 実質的に選択子仕様に対する意図的違反です。

[16] 子孫:hover であるために :hover であるような要素は、 実際にはその要素自体は指示装置が指している点を含まないかもしれません。 >>9 例えば絶対配置要素になっていると、子要素はまったく親要素と関係ない位置にレンダリングされている可能性があります。

[37] 奇癖モードでの一致については互換性のための特別な規定 >>36 があります。 詳しくは :active:hoverの奇癖の項をご覧ください。

リンク

[17] 古い利用者エージェント、とりわけIEリンク以外に :hover を適用させなかったため、当時のスタイル・シートリンクにだけ適用される意図があったものが現在の利用者エージェントではリンク以外にも適用されてしまうことがあります。

歴史

CSS2

[22] >>21 が初出ですが、 :link, :visited, :active と排他的であるとされていました。

[24] >>23 で独立した状態となりました。

CSS3 UI

[26] css3-ui は単に選択子3仕様書を引用するだけになっています。

奇癖モード

[38] 2012年2月に奇癖モード標準によって奇癖モードでの挙動が明文化されました。

メモ

[3] WinIE ではリンク以外で :hover が効かないので onmouseoveronmouseout を使う方法が採られますが、その方法だと HTML の修正が必要になります。

が、 expression を使えば CSS だけで同じことができます。

実現例: Pseudo Pseudo Class “hover” for WinIE <http://suika.fam.cx/gate/cvs/*checkout*/www/test/css/trident/expression/pseudo-hover.html> (名無しさん 2005-05-24 01:48:39 +00:00)

[4] Mozillaのa:hoverは厳密なため注意が必要です - Web標準普及プロジェクト <http://www.mozilla.gr.jp/standards/webtips0010.html>

[5] JavaScriptでマウスカーソルがポイントしている要素(:hover)を取得する方法 - uupaaの開発日記 ( 版) <http://d.hatena.ne.jp/uupaa/20080927/1222524566>

[6] こっそりと特定の要素をマーキングし取得する - uupaaの開発日記 ( 版) <http://d.hatena.ne.jp/uupaa/20080929/1222628532>

[7] Bug 3611 マウスでフォームのセレクトを選択できない - WebStudio ( 版) <http://www.d-toybox.com/studio/weblog/show.php?mode=single;id=2008122300>

[8] Three Monkeys, Three Typewriters, Two Days: Performance vs correctness tradeoffs ( 版) <http://weblogs.mozillazine.org/bz/archives/020267.html>

[19] Web Controls 1.0 ( ( 版)) <http://www.whatwg.org/specs/web-controls/current-work/#pseudo-classes>

[20] Web Applications Markup Language 1.0 ( ( 版)) <http://hixie.ch/specs/html/apps/web-apps-1#pseudo-classes>

[27] Quirks Mode Standard ( ( 版)) <http://simon.html5.org/specs/quirks-mode#the-:active-and-:hover-quirk>

[28] Web Applications 1.0 r7126 Define :hover's weird HTML behaviours ( ( 版)) <http://html5.org/tools/web-apps-tracker?from=7125&to=7126>

[39] Re: [whatwg] relationship between labeled control and label for :active and :hover pseudos ( (Ian Hickson 著, 版)) <http://lists.w3.org/Archives/Public/public-whatwg-archive/2015Jan/0013.html>

[40] IE10で:hover時に擬似要素のスタイルが変更されない場合の解決策 - Qiita ( ()) <https://qiita.com/shouchida/items/e5238c1e6aa59bf8050c>

[41] Deprecations and Removals in Chrome 59  |  Web  |  Google Developers () <https://developers.google.com/web/updates/2017/04/chrome-59-deprecations>