发行任意元素的hover的起因

  • 版本网址缩略名: 发行任意元素的hover的起因
  • 版本标题: 发行任意元素的hover的起因
  • 版本 id: 263935
  • 创建于:
  • 创建者: Gonefish
  • 是否是当前版本?
  • 评论 /* 未指定的伪类 */

修订内容

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. 很多开发者都使用CSS2伪类:hover装饰他们的链接。这个创新,首先被Microsoft® Internet Explorer引入,随后被CSS规范所采用,是非常受欢迎的文本链接样式,尤其是那些看起来和动起来像以JavaScript驱动的交互动态效果。除了推进浏览器对CSS的支持以外,还产生了一些出乎意料的hovering地活泼行为在一些页面。

Hover和非链接元素

Section 5.11.3 of CSS2定义了三个动态的伪类(:hover, :active, and :focus),然后继续表示:

CSS可能不会定义以上那几个状态的元素,或者状态为什么被加入的左派。脚本能否改变产生用户事件的元素,或者不同的设置和使用不同方法的指向以及活动的元素。(翻译的可能不准确,不明白可以看下原文。)

这样,尽管设计者们习惯于过去的想法,将这些状态被应用在专有的超链接上,但它们不是那样有限在CSS2中。理论上任何元素都能达到这三种状态,和基于这样状态的样式。这不是传统上的使用情形。

未指定的伪类

第二篇的问题来自当我们在一个选择器上考虑使用未指定的伪类的效果时。例如:

: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,所以当用户的鼠标移动到那个单元里面,竖线字符将会变成红色。链接将会在它们hover的时候变成红色。

Gecko的行为

In browsers based on Netscape Gecko builds later than 20020410 (Netscape 6.1+), :hover styles can be applied to any element in a document. Thus authors who have used bare pseudo-classes, or bare class-pseudo-class combinations, are at risk for seeing hover styles applied to more than just their links. The most reliable fix is to add the anchor element to the selectors, like this:

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

In an attempt to avoid causing problems for legacy documents, browsers based on Mozilla 1.0 and later (Netscape 7+) include code that causes bare pseudo-classes to be restricted only to links if the document is rendered in "quirks" mode. In browsers based on the engine found in Mozilla 1.3b and later, this quirk is extended to cover selectors that combine a bare class selector with the :hover pseudo-class (see Bugzilla entry #169078 for details).

Named Anchor Problems

In addition to the effects described previously, there are two other relatively common effect that authors may not expect. One is easily fixed by validation, but the other is a little more subtle.

First, there is the problem of authors who open a named anchor but do not close it. For example:

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

Without a </a>, this name will effectively enclose the rest of the document. This generally means that the rest of the document will take hover styles. Consider the effects of the following rule:

a:hover {color: red;}

In a document with an unclosed named anchor, any text that follows the anchor's open tag will be colored red (unless another CSS rule intervenes).

This brings up the second common problem, which is that named anchors can accept hover styles. Although authors may intend the selector a:hover to apply only to hyperlinks, it will also apply to named anchors, since the selector merely states that any a element which is in a hover state will be styled. In order to avoid this problem, authors should use the combined pseudo-class syntax described by CSS2:

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

Note that, with this syntax, it is possible to styles visited and unvisited links differently when they are hovered. This was not possible with simple a:hover. It does mean, of course, that the selector a:link:hover will only apply to unvisited links, so authors who want the same hover style to apply to both visited and unvisited links should group the two selectors into a single rule.

Recommendation

To avoid unexpected problems, authors are strongly encouraged to include element names in dynamic-state pseudo-classes that are meant to be applied to hyperlinks. Furthermore, combining pseudo-classes prevents hover styles from being applied to non-hyperlink anchors. Thus, a:hover should always be used instead of just :hover, and a:link:hover (and a:visited:hover) are preferred to the simpler a:hover.

Related Links

Original Document Information

  • Author(s): Eric A. Meyer, Netscape Communications
  • Last Updated Date: Published 07 Mar 2003; Revised 21 Mar 2003
  • Copyright Information: Copyright © 2001-2003 Netscape. All rights reserved.
  • Note: This reprinted article was originally part of the DevEdge site.

修订版来源

<p>
</p><p><span class="comment">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.</span>
很多开发者都使用CSS2伪类<code>:hover</code>装饰他们的链接。这个创新,首先被Microsoft® Internet Explorer引入,随后被CSS规范所采用,是非常受欢迎的文本链接样式,尤其是那些看起来和动起来像以JavaScript驱动的交互动态效果。除了推进浏览器对CSS的支持以外,还产生了一些出乎意料的hovering地活泼行为在一些页面。
</p>
<h3 name="Hover.E5.92.8C.E9.9D.9E.E9.93.BE.E6.8E.A5.E5.85.83.E7.B4.A0"> Hover和非链接元素 </h3>
<p><a class="external" href="http://www.w3.org/TR/CSS2/selector.html#x36">Section 5.11.3 of CSS2</a>定义了三个动态的伪类(<code>:hover</code>, <code>:active</code>, and <code>:focus</code>),然后继续表示:
</p>
<blockquote>CSS可能不会定义以上那几个状态的元素,或者状态为什么被加入的左派。脚本能否改变产生用户事件的元素,或者不同的设置和使用不同方法的指向以及活动的元素。(翻译的可能不准确,不明白可以看下原文。)</blockquote>  
<p>这样,尽管设计者们习惯于过去的想法,将这些状态被应用在专有的超链接上,但它们不是那样有限在CSS2中。理论上任何元素都能达到这三种状态,和基于这样状态的样式。这不是传统上的使用情形。
</p>
<h3 name=".E6.9C.AA.E6.8C.87.E5.AE.9A.E7.9A.84.E4.BC.AA.E7.B1.BB"> 未指定的伪类 </h3>
<p>第二篇的问题来自当我们在一个选择器上考虑使用未指定的伪类的效果时。例如:
</p>
<pre>:hover {color: red;}</pre>
<p>这样等效于CSS2的标准:
</p>
<pre>*:hover {color: red;}</pre>
<p>哪一个都被解释为“设置任何元素的hover前景色为红色。”所以,段落、表格、标题也在hover范围内,在一个页面中任何其它元素的文本将变成红色。
</p><p>一个公用未指定的类和伪类的hover一起使用的变量,像这样:
</p>
<pre>.nav:hover {color: red;}</pre>
<p>在这种情况,只有实例的<code>class</code>属性的值是<code>nav</code>位置的超链接时候,才能正常工作。无论如何,这种类型的规则经常看见在像这样的联合标记中:
</p>
<pre>&lt;td class="nav"&gt;
&lt;a href="one.html" class="nav"&gt;one&lt;/a&gt; | 
&lt;a href="two.html" class="nav"&gt;two&lt;/a&gt; | 
&lt;a href="thr.html" class="nav"&gt;three&lt;/a&gt; | 
&lt;a href="fou.html" class="nav"&gt;four&lt;/a&gt;
&lt;/td&gt;</pre>
<p>因为装入的表格有一个<code>class</code>的值是<code>nav</code>,所以当用户的鼠标移动到那个单元里面,竖线字符将会变成红色。链接将会在它们hover的时候变成红色。
</p>
<h3 name="Gecko.E7.9A.84.E8.A1.8C.E4.B8.BA"> Gecko的行为 </h3>
<p>In browsers based on Netscape Gecko builds later than 20020410 (Netscape 6.1+), <code>:hover</code> styles can be applied to any element in a document. Thus authors who have used bare pseudo-classes, or bare class-pseudo-class combinations, are at risk for seeing hover styles applied to more than just their links. The most reliable fix is to add the anchor element to the selectors, like this:
</p>
<pre>a:hover {color: red;}
a.nav:hover {color: red;}</pre>
<p>In an attempt to avoid causing problems for legacy documents, browsers based on Mozilla 1.0 and later (Netscape 7+) include code that causes bare pseudo-classes to be restricted only to links if the document is rendered in "quirks" mode. In browsers based on the engine found in Mozilla 1.3b and later, this quirk is extended to cover selectors that combine a bare class selector with the <code>:hover</code> pseudo-class (see Bugzilla entry #169078 for details).
</p>
<h3 name="Named_Anchor_Problems"> Named Anchor Problems </h3>
<p>In addition to the effects described previously, there are two other relatively common effect that authors may not expect. One is easily fixed by validation, but the other is a little more subtle.
</p><p>First, there is the problem of authors who open a named anchor but do not close it. For example:
</p>
<pre>&lt;a name="pagetop"&gt;
&lt;h2&gt;My Page&lt;/h2&gt;</pre>
<p>Without a <code>&lt;/a&gt;</code>, this name will effectively enclose the rest of the document. This generally means that the rest of the document will take hover styles. Consider the effects of the following rule:
</p>
<pre>a:hover {color: red;}</pre>
<p>In a document with an unclosed named anchor, any text that follows the anchor's open tag will be colored red (unless another CSS rule intervenes).
</p><p>This brings up the second common problem, which is that named anchors can accept hover styles. Although authors may intend the selector <code>a:hover</code> to apply only to hyperlinks, it will also apply to named anchors, since the selector merely states that any <code>a</code> element which is in a hover state will be styled. In order to avoid this problem, authors should use the combined pseudo-class syntax described by CSS2:
</p>
<pre>a:link:hover {color: red;}
a:visited:hover {color: maroon;}</pre>
<p>Note that, with this syntax, it is possible to styles visited and unvisited links differently when they are hovered. This was not possible with simple <code>a:hover</code>. It does mean, of course, that the selector <code>a:link:hover</code> will only apply to unvisited links, so authors who want the same hover style to apply to both visited and unvisited links should group the two selectors into a single rule.
</p>
<h3 name="Recommendation"> Recommendation </h3>
<p>To avoid unexpected problems, authors are <b>strongly</b> encouraged to include element names in dynamic-state pseudo-classes that are meant to be applied to hyperlinks. Furthermore, combining pseudo-classes prevents hover styles from being applied to non-hyperlink anchors. Thus, <code>a:hover</code> should always be used instead of just <code>:hover</code>, and <code>a:link:hover</code> (and <code>a:visited:hover</code>) are preferred to the simpler a:hover. 
</p>
<h3 name="Related_Links"> Related Links </h3>
<ul><li> <a class="external" href="http://www.w3.org/TR/CSS2/selector.html#x36">The dynamic pseudo-classes: :hover, :active, and :focus</a>
</li></ul>
<div class="originaldocinfo">
<h3 name="Original_Document_Information"> Original Document Information </h3>
<ul><li> Author(s): Eric A. Meyer, Netscape Communications
</li><li> Last Updated Date: Published 07 Mar 2003; Revised 21 Mar 2003
</li><li> Copyright Information: Copyright © 2001-2003 Netscape. All rights reserved.
</li><li> Note: This reprinted article was originally part of the DevEdge site.
</li></ul>
</div>
恢复到这个版本