[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