[html5] r7126 - [giow] (2) Define :hover's weird HTML behaviours Affected topics: HTML

whatwg at whatwg.org whatwg at whatwg.org
Fri Jun 8 14:33:59 PDT 2012


Author: ianh
Date: 2012-06-08 14:33:58 -0700 (Fri, 08 Jun 2012)
New Revision: 7126

Modified:
   complete.html
   index
   source
Log:
[giow] (2) Define :hover's weird HTML behaviours
Affected topics: HTML

Modified: complete.html
===================================================================
--- complete.html	2012-06-07 22:44:00 UTC (rev 7125)
+++ complete.html	2012-06-08 21:33:58 UTC (rev 7126)
@@ -240,7 +240,7 @@
 
   <header class=head id=head><p><a class=logo href=http://www.whatwg.org/><img alt=WHATWG height=101 src=/images/logo width=101></a></p>
    <hgroup><h1 class=allcaps>HTML</h1>
-    <h2 class="no-num no-toc">Living Standard — Last Updated 7 June 2012</h2>
+    <h2 class="no-num no-toc">Living Standard — Last Updated 8 June 2012</h2>
    </hgroup><dl><dt><strong>Web developer edition:</strong></dt>
     <dd><strong><a href=http://developers.whatwg.org/>http://developers.whatwg.org/</a></strong></dd>
     <dt>Multiple-page version:</dt>
@@ -60070,6 +60070,65 @@
     </ul></dd>
 
 
+   <dt><dfn id=selector-hover title=selector-hover><code>:hover</code></dfn></dt>
+
+   <dd>
+
+    <p>The <code title=selector-hover><a href=#selector-hover>:hover</a></code> pseudo-class is
+    defined to match an element <q cite=http://dev.w3.org/csswg/selectors3/#the-user-action-pseudo-classes-hover-act>while
+    the user <i>designates</i> an element with a pointing device</q>.
+    For the purposes of defining the <code title=selector-hover><a href=#selector-hover>:hover</a></code> pseudo-class only, an HTML
+    user agent must consider an element as being one that the user
+    <i>designates</i> if it is:</p>
+
+    <ul><li>
+
+      <p>An element that the user indicates using a pointing device.</p>
+
+     </li>
+
+     <li>
+
+      <p>An element that has a descendant that the user indicates
+      using a pointing device.</p>
+
+     </li>
+
+     <li>
+
+      <p>An element that is the <a href=#labeled-control>labeled control</a> of a
+      <code><a href=#the-label-element>label</a></code> element that is currently matching <a href=#selector-hover title=selector-hover>:hover</a>.</p>
+
+     </li>
+
+    </ul><!--
+Demos:
+ http://software.hixie.ch/utilities/js/live-dom-viewer/saved/1315
+ http://software.hixie.ch/utilities/js/live-dom-viewer/saved/1316
+ http://software.hixie.ch/utilities/js/live-dom-viewer/saved/1317
+--><div class=example>
+
+     <p>Consider in particular a fragment such as:</p>
+
+     <pre><p> <label for=c> <input id=a> </label> <span id=b> <input id=c> </span> </p></pre>
+
+     <p>If the user designates the element with ID "<code title="">a</code>" with their pointing device, then the
+     <code><a href=#the-p-element>p</a></code> element (and all its ancestors not shown in the
+     snippet above), the <code><a href=#the-label-element>label</a></code> element, the element with
+     ID "<code title="">a</code>", and the element with ID "<code title="">c</code>" will match the <a href=#selector-hover title=selector-hover>:hover</a> pseudo-class. The element
+     with ID "<code title="">a</code>" matches it from condition 1,
+     the <code><a href=#the-label-element>label</a></code> and <code><a href=#the-p-element>p</a></code> elements match it
+     because of condition 2 (one of their descendants is designated),
+     and the element with ID "<code title="">c</code>" matches it
+     through condition 3 (its <code><a href=#the-label-element>label</a></code> element matches <a href=#selector-hover title=selector-hover>:hover</a>). However, the element with
+     ID "<code title="">b</code>" does <em>not</em> match <a href=#selector-hover title=selector-hover>:hover</a>: its descendant is not
+     designated, even though it matches <a href=#selector-hover title=selector-hover>:hover</a>.</p>
+
+    </div>
+
+   </dd>
+
+
    <dt><dfn id=selector-enabled title=selector-enabled><code>:enabled</code></dfn></dt>
 
    <dd>
@@ -60377,7 +60436,7 @@
   <i><a href=#target-element>target element</a></i> used with the <code title=selector-target>:target</code> pseudo-class.</p>
 
   <p class=note>This specification does not define when an element
-  matches the <code title=selector-hover>:hover</code>, <code title=selector-focus>:focus</code>, or <code title=selector-lang()>:lang()</code> dynamic pseudo-classes, as
+  matches the <code title=selector-focus>:focus</code> or <code title=selector-lang()>:lang()</code> dynamic pseudo-classes, as
   those are all defined in sufficient detail in a language-agnostic
   fashion in the Selectors specification. <a href=#refsSELECTORS>[SELECTORS]</a></p>
 

Modified: index
===================================================================
--- index	2012-06-07 22:44:00 UTC (rev 7125)
+++ index	2012-06-08 21:33:58 UTC (rev 7126)
@@ -240,7 +240,7 @@
 
   <header class=head id=head><p><a class=logo href=http://www.whatwg.org/><img alt=WHATWG height=101 src=/images/logo width=101></a></p>
    <hgroup><h1 class=allcaps>HTML</h1>
-    <h2 class="no-num no-toc">Living Standard — Last Updated 7 June 2012</h2>
+    <h2 class="no-num no-toc">Living Standard — Last Updated 8 June 2012</h2>
    </hgroup><dl><dt><strong>Web developer edition:</strong></dt>
     <dd><strong><a href=http://developers.whatwg.org/>http://developers.whatwg.org/</a></strong></dd>
     <dt>Multiple-page version:</dt>
@@ -60070,6 +60070,65 @@
     </ul></dd>
 
 
+   <dt><dfn id=selector-hover title=selector-hover><code>:hover</code></dfn></dt>
+
+   <dd>
+
+    <p>The <code title=selector-hover><a href=#selector-hover>:hover</a></code> pseudo-class is
+    defined to match an element <q cite=http://dev.w3.org/csswg/selectors3/#the-user-action-pseudo-classes-hover-act>while
+    the user <i>designates</i> an element with a pointing device</q>.
+    For the purposes of defining the <code title=selector-hover><a href=#selector-hover>:hover</a></code> pseudo-class only, an HTML
+    user agent must consider an element as being one that the user
+    <i>designates</i> if it is:</p>
+
+    <ul><li>
+
+      <p>An element that the user indicates using a pointing device.</p>
+
+     </li>
+
+     <li>
+
+      <p>An element that has a descendant that the user indicates
+      using a pointing device.</p>
+
+     </li>
+
+     <li>
+
+      <p>An element that is the <a href=#labeled-control>labeled control</a> of a
+      <code><a href=#the-label-element>label</a></code> element that is currently matching <a href=#selector-hover title=selector-hover>:hover</a>.</p>
+
+     </li>
+
+    </ul><!--
+Demos:
+ http://software.hixie.ch/utilities/js/live-dom-viewer/saved/1315
+ http://software.hixie.ch/utilities/js/live-dom-viewer/saved/1316
+ http://software.hixie.ch/utilities/js/live-dom-viewer/saved/1317
+--><div class=example>
+
+     <p>Consider in particular a fragment such as:</p>
+
+     <pre><p> <label for=c> <input id=a> </label> <span id=b> <input id=c> </span> </p></pre>
+
+     <p>If the user designates the element with ID "<code title="">a</code>" with their pointing device, then the
+     <code><a href=#the-p-element>p</a></code> element (and all its ancestors not shown in the
+     snippet above), the <code><a href=#the-label-element>label</a></code> element, the element with
+     ID "<code title="">a</code>", and the element with ID "<code title="">c</code>" will match the <a href=#selector-hover title=selector-hover>:hover</a> pseudo-class. The element
+     with ID "<code title="">a</code>" matches it from condition 1,
+     the <code><a href=#the-label-element>label</a></code> and <code><a href=#the-p-element>p</a></code> elements match it
+     because of condition 2 (one of their descendants is designated),
+     and the element with ID "<code title="">c</code>" matches it
+     through condition 3 (its <code><a href=#the-label-element>label</a></code> element matches <a href=#selector-hover title=selector-hover>:hover</a>). However, the element with
+     ID "<code title="">b</code>" does <em>not</em> match <a href=#selector-hover title=selector-hover>:hover</a>: its descendant is not
+     designated, even though it matches <a href=#selector-hover title=selector-hover>:hover</a>.</p>
+
+    </div>
+
+   </dd>
+
+
    <dt><dfn id=selector-enabled title=selector-enabled><code>:enabled</code></dfn></dt>
 
    <dd>
@@ -60377,7 +60436,7 @@
   <i><a href=#target-element>target element</a></i> used with the <code title=selector-target>:target</code> pseudo-class.</p>
 
   <p class=note>This specification does not define when an element
-  matches the <code title=selector-hover>:hover</code>, <code title=selector-focus>:focus</code>, or <code title=selector-lang()>:lang()</code> dynamic pseudo-classes, as
+  matches the <code title=selector-focus>:focus</code> or <code title=selector-lang()>:lang()</code> dynamic pseudo-classes, as
   those are all defined in sufficient detail in a language-agnostic
   fashion in the Selectors specification. <a href=#refsSELECTORS>[SELECTORS]</a></p>
 

Modified: source
===================================================================
--- source	2012-06-07 22:44:00 UTC (rev 7125)
+++ source	2012-06-08 21:33:58 UTC (rev 7126)
@@ -70180,6 +70180,79 @@
    </dd>
 
 
+   <dt><dfn title="selector-hover"><code>:hover</code></dfn></dt>
+
+   <dd>
+
+    <p>The <code title="selector-hover">:hover</code> pseudo-class is
+    defined to match an element <q
+    cite="http://dev.w3.org/csswg/selectors3/#the-user-action-pseudo-classes-hover-act">while
+    the user <i>designates</i> an element with a pointing device</q>.
+    For the purposes of defining the <code
+    title="selector-hover">:hover</code> pseudo-class only, an HTML
+    user agent must consider an element as being one that the user
+    <i>designates</i> if it is:</p>
+
+    <ul>
+
+     <li>
+
+      <p>An element that the user indicates using a pointing device.</p>
+
+     </li>
+
+     <li>
+
+      <p>An element that has a descendant that the user indicates
+      using a pointing device.</p>
+
+     </li>
+
+     <li>
+
+      <p>An element that is the <span>labeled control</span> of a
+      <code>label</code> element that is currently matching <span
+      title="selector-hover">:hover</span>.</p>
+
+     </li>
+
+    </ul>
+<!--
+Demos:
+ http://software.hixie.ch/utilities/js/live-dom-viewer/saved/1315
+ http://software.hixie.ch/utilities/js/live-dom-viewer/saved/1316
+ http://software.hixie.ch/utilities/js/live-dom-viewer/saved/1317
+-->
+
+    <div class="example">
+
+     <p>Consider in particular a fragment such as:</p>
+
+     <pre><p> <label for=c> <input id=a> </label> <span id=b> <input id=c> </span> </p></pre>
+
+     <p>If the user designates the element with ID "<code
+     title="">a</code>" with their pointing device, then the
+     <code>p</code> element (and all its ancestors not shown in the
+     snippet above), the <code>label</code> element, the element with
+     ID "<code title="">a</code>", and the element with ID "<code
+     title="">c</code>" will match the <span
+     title="selector-hover">:hover</span> pseudo-class. The element
+     with ID "<code title="">a</code>" matches it from condition 1,
+     the <code>label</code> and <code>p</code> elements match it
+     because of condition 2 (one of their descendants is designated),
+     and the element with ID "<code title="">c</code>" matches it
+     through condition 3 (its <code>label</code> element matches <span
+     title="selector-hover">:hover</span>). However, the element with
+     ID "<code title="">b</code>" does <em>not</em> match <span
+     title="selector-hover">:hover</span>: its descendant is not
+     designated, even though it matches <span
+     title="selector-hover">:hover</span>.</p>
+
+    </div>
+
+   </dd>
+
+
    <dt><dfn title="selector-enabled"><code>:enabled</code></dfn></dt>
 
    <dd>
@@ -70587,8 +70660,7 @@
   title="selector-target">:target</code> pseudo-class.</p>
 
   <p class="note">This specification does not define when an element
-  matches the <code title="selector-hover">:hover</code>, <code
-  title="selector-focus">:focus</code>, or <code
+  matches the <code title="selector-focus">:focus</code> or <code
   title="selector-lang()">:lang()</code> dynamic pseudo-classes, as
   those are all defined in sufficient detail in a language-agnostic
   fashion in the Selectors specification. <a




More information about the Commit-Watchers mailing list