mozilla

版本 263933 / 发行任意元素的hover的起因

  • 版本网址缩略名: 发行任意元素的hover的起因
  • 版本标题: 发行任意元素的hover的起因
  • 版本 id: 263933
  • 创建于:
  • 创建者: Gonefish
  • 是否是当前版本?
  • 评论 /* Bare Pseudo-Classes */
标签: 

修订内容

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中。理论上任何元素都能达到这三种状态,和基于这样状态的样式。这不是传统上的使用情形。

空伪类

The second piece of the problem comes when we consider the effects of a "bare" pseudo-class in a selector. For example:

:hover {color: red;}

This is equivalent to the CSS2 rule:

*:hover {color: red;}

..which translates as "any element that is being hovered should have its foreground colored red." Thus, hovering over paragraphs, tables, headings, and any other element in a document will cause text to become red.

A common variant is to use a bare class and hover pseudo-class together, like this:

.nav:hover {color: red;}

In situations where the only instances of the class value nav are applied to hyperlinks, this will work fine. However, rules of this type are usually seen in conjunction with markup like this:

<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>

Because the enclosing table cell has a class of nav, the vertical-bar characters will turn red when the user moves the mouse pointer anywhere within the table cell. The links will also turn red when they are hovered.

Gecko Behavior

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=".E7.A9.BA.E4.BC.AA.E7.B1.BB"> 空伪类 </h3>
<p>The second piece of the problem comes when we consider the effects of a "bare" pseudo-class in a selector. For example:
</p>
<pre>:hover {color: red;}</pre>
<p>This is equivalent to the CSS2 rule:
</p>
<pre>*:hover {color: red;}</pre>
<p>..which translates as "any element that is being hovered should have its foreground colored red." Thus, hovering over paragraphs, tables, headings, and any other element in a document will cause text to become red.
</p><p>A common variant is to use a bare class and hover pseudo-class together, like this:
</p>
<pre>.nav:hover {color: red;}</pre>
<p>In situations where the only instances of the <code>class</code> value <code>nav</code> are applied to hyperlinks, this will work fine. However, rules of this type are usually seen in conjunction with markup like this:
</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>Because the enclosing table cell has a <code>class</code> of <code>nav</code>, the vertical-bar characters will turn red when the user moves the mouse pointer anywhere within the table cell. The links will also turn red when they are hovered.
</p>
<h3 name="Gecko_Behavior"> Gecko Behavior </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>
恢复到这个版本