[10] [DFN[[CODE(CSS)@en[:hover]]]] [[擬似クラス]]は、[RUBYB[[[指示装置]]]@en[pointing device]]で指している[[要素]]に適用されます [SRC[>>9]]。 * 仕様書 [REFS[ - [9] '''[CITE@en[Selectors Level 3]] ([TIME[2011-09-29 22:16:17 +09:00]] 版) ''' - [29] [CITE@en-US-x-hixie[HTML Standard]] ([TIME[2012-06-08 22:09:53 +09:00]] 版) - [36] [CITE@en-US[Quirks Mode Standard]] ([TIME[2012-11-13 08:54:35 +09:00]] 版) ]REFS] * 意味 [11] この[[擬似クラス]]は[[指示装置]]で[RUBYB[指して]@en[designate]]いる[[要素]]に適用されます。 [[指示装置]]を使うとその[[要素]]を[[活性化]]させることができるかもしれませんが、 [CODE(CSS)@en[[[:hover]]]] は[[活性化]]の有無には関係ありません。 [SRC[>>9]] [12] [[マウス]]を使っている場合、当該[[要素]]によって[[生成]]された[[箱]]の上に[RUBY[[[指示子]]][ポインター]]があれば、 その[[要素]]を指しているといえます。 [SRC[>>9]] [13] [[対話的媒体]]以外では対応する必要がありません。[[対話的媒体]]であっても、[[ペン]]しか接続されていないなど、 対応できないことがあります。 [SRC[>>9]] [30] [[要素]]を[RUBYB[指している]@en[designated]]とは、次のいずれかの条件に合致することを言います [SRC[>>29]]。 - [31] [[利用者]]が[[指示装置]]で指している[[要素]]であること - [32] [[利用者]]が[[指示装置]]で指している[[要素]]を[[子孫]]として持つ[[要素]]たること - [33] [CODE(CSS)@en[[[:hover]]]] に[[一致]]している [CODE(HTMLe)@en[[[label]]]] [[要素]]の[[被札付け制御子]]である[[要素]]たること ;; [34] [[選択子]]本体仕様ではなく [[HTML]] 仕様で規定されているため、 [[HTML利用者エージェント]]にのみ [SRC[>>29]] 適用されるとされていますが、 実質的に実用的な実装すべてに該当します。 [14] [CODE(CSS)@en[[[:hover]]]] である[[要素]]の[[親要素]]もまた [CODE(CSS)@en[[[:hover]]]] が適用されるか否かは[[選択子]]の仕様書では規定しないとなっています [SRC[>>9]]。 [15] しかし実際には[[Webブラウザー]]は[[子孫要素]]が [CODE(CSS)@en[[[:hover]]]] である[[要素]]についても [CODE(CSS)@en[[[:hover]]]] であるとみなしており、それを前提にした[[スタイル・シート]]も一般的に使われています。 ;; [35] [CODE(HTMLe)@en[[[label]]]] [[要素]]の[[被札付け制御子]]にまで適用されるのは互換性のためで、 おそらく [CODE(CSS)@en[[[:active]]]] の件を踏まえた [[CSS WG]] への配慮があるのでしょうが、 実質的に[[選択子]]仕様に対する[[意図的違反]]です。 [16] [[子孫]]が [CODE(CSS)@en[[[:hover]]]] であるために [CODE(CSS)@en[[[:hover]]]] であるような[[要素]]は、 実際にはその[[要素]]自体は[[指示装置]]が指している点を含まないかもしれません。 [SRC[>>9]] 例えば[[絶対配置要素]]になっていると、[[子要素]]はまったく[[親要素]]と関係ない位置に[[レンダリング]]されている可能性があります。 [37] [[奇癖モード]]での[[一致]]については互換性のための特別な規定 [SRC[>>36]] があります。 詳しくは [[[CODE(CSS)@en[:active]]と[CODE(CSS)@en[:hover]]の奇癖]]の項をご覧ください。 ** リンク [17] 古い[[利用者エージェント]]、とりわけ[[IE]]は[[リンク]]以外に [CODE(CSS)@en[[[:hover]]]] を適用させなかったため、当時の[[スタイル・シート]]で[[リンク]]にだけ適用される意図があったものが現在の[[利用者エージェント]]では[[リンク]]以外にも適用されてしまうことがあります。 * 歴史 ** CSS2 [REFS[ - [21] [CITE@en[Selectors]] ([TIME[2001-01-16 00:22:58 +09:00]] 版) - [23] [CITE@en[Selectors]] ([TIME[1998-03-25 23:00:31 +09:00]] 版) - [18] [CITE@en[Selectors]] ([TIME[2011-06-07 22:09:52 +09:00]] 版) ]REFS] [22] >>21 が初出ですが、 [CODE(CSS)@en[[[:link]]]], [CODE(CSS)@en[[[:visited]]]], [CODE(CSS)@en[[[:active]]]] と排他的であるとされていました。 [24] >>23 で独立した状態となりました。 ** CSS3 UI [26] [[css3-ui]] は単に[[選択子3]]仕様書を引用するだけになっています。 [REFS[ - [25] [CITE@en[CSS Basic User Interface Module Level 3 (CSS3 UI)]] ([[Tantek Çelik]] 著, [TIME[2012-01-13 20:03:30 +09:00]] 版) ]REFS] ** 奇癖モード [38] 2012年2月に[[奇癖モード標準]]によって[[奇癖モード]]での挙動が明文化されました。 * メモ - [1] ''りんく'' の「虹色リンク」ってやつ。面白いアイディアだと思った。 - [2] >>1 要は、 [CODE(CSS)[:hover]] の時に一定時間おきに適当な色を順番に [CODE(CSS)[[[color]]]] に指定していくだけなんだけど。 [[XBL]]/[[HTC]] にしたら面白そう。 [3] [[WinIE]] では[[リンク]]以外で [CODE(CSS)[:[[hover]]]] が効かないので [CODE(HTMLa)[[[onmouseover]]]] や [CODE(HTMLa)[[[onmouseout]]]] を使う方法が採られますが、その方法だと [[HTML]] の修正が必要になります。 が、 [CODE(CSS)[[[expression]]]] を使えば [[CSS]] だけで同じことができます。 実現例: [CITE[Pseudo Pseudo Class “hover” for WinIE]] ([[名無しさん]] [WEAK[2005-05-24 01:48:39 +00:00]]) [4] [CITE[Mozillaのa:hoverは厳密なため注意が必要です - Web標準普及プロジェクト]] [5] [CITE[JavaScriptでマウスカーソルがポイントしている要素(:hover)を取得する方法 - uupaaの開発日記]] ([TIME[2008-12-27 15:29:17 +09:00]] 版) [6] [CITE[こっそりと特定の要素をマーキングし取得する - uupaaの開発日記]] ([TIME[2008-12-27 15:29:19 +09:00]] 版) [7] [CITE@ja[Bug 3611 マウスでフォームのセレクトを選択できない - WebStudio]] ([TIME[2008-12-23 06:31:15 +09:00]] 版) [8] [CITE[Three Monkeys, Three Typewriters, Two Days: Performance vs correctness tradeoffs]] ([TIME[2009-11-19 06:49:51 +09:00]] 版) [19] [CITE@en-GB-hixie[Web Controls 1.0]] ( ([TIME[2004-11-09 08:49:52 +09:00]] 版)) [20] [CITE@en-GB-hixie[Web Applications Markup Language 1.0]] ( ([TIME[2004-04-08 02:39:12 +09:00]] 版)) [27] [CITE[Quirks Mode Standard]] ( ([TIME[2012-02-09 23:33:50 +09:00]] 版)) [28] [CITE@en[Web Applications 1.0 r7126 Define :hover's weird HTML behaviours]] ( ([TIME[2012-06-09 06:33:00 +09:00]] 版)) [39] [CITE@en[Re: ''''''[''''''whatwg'''''']'''''' relationship between labeled control and label for :active and :hover pseudos]] ( ([[Ian Hickson]] 著, [TIME[2015-01-07 08:29:01 +09:00]] 版)) [40] [CITE[IE10で:hover時に擬似要素のスタイルが変更されない場合の解決策 - Qiita]] ( ([TIME[2017-03-28 12:04:10 +09:00]])) [41] [CITE@en[Deprecations and Removals in Chrome 59  |  Web  |  Google Developers]] ([TIME[2017-05-13 04:52:02 +09:00]])