MDN may have intermittent access issues April 18 13:00 - April 19 01:00 UTC. See whistlepig.mozilla.org for all notifications.

mozilla

比较版本

发行任意元素的hover的起因

更改版本

修订版 263950:

由 Gonefish 在 进行的修订 263950

修订版 231084:

由 Gonefish 在 进行的修订 231084

标题:
发行任意元素的hover的起因
发行任意元素的hover的起因
网址缩略名:
发行任意元素的hover的起因
发行任意元素的hover的起因
标签:
css, 所有分类
内容:

修订版 263950
修订版 231084
t7    <p>t
8      <span class="comment">Summary: Thanks to long-standing limi
>tations, we're used to thinking of hover styles as applying only  
>to hyperlinks, which has led to some sloppy authoring practices t 
>hat are now causing problems for some Web sites. This technote ex 
>plains the source of the problems and how to avoid encountering t 
>hem.</span> 很多设计者都使用CSS2伪类<code>:hover</code>装饰他们的链接。这个创新,首先被Micr 
>osoft® Internet Explorer引入,随后被CSS规范所采用,是非常受欢迎的文本链接样式,尤其是那些看起来和动起来 
>像以JavaScript驱动的交互动态效果。除了推进浏览器对CSS的支持以外,还产生了一些出乎意料的hovering地活泼行为在一 
>些页面。 
9    </p>
10    <h3 id="Hover.E5.92.8C.E9.9D.9E.E9.93.BE.E6.8E.A5.E5.85.83.E7
>.B4.A0" name="Hover.E5.92.8C.E9.9D.9E.E9.93.BE.E6.8E.A5.E5.85.83. 
>E7.B4.A0"> 
11      Hover和非链接元素
12    </h3>
13    <p>
14      <a class="external" href="http://www.w3.org/TR/CSS2/selecto
>r.html#x36">Section 5.11.3 of CSS2</a>定义了三个动态的伪类(<code>:hover</co 
>de>, <code>:active</code>, and <code>:focus</code>),然后继续表示: 
15    </p>
16    <blockquote>
17      CSS可能不会定义以上那几个状态的元素,或者状态为什么被加入的左派。脚本能否改变产生用户事件的元素,或者不同的设置和使
>用不同方法的指向以及活动的元素。(翻译的可能不准确,不明白可以看下原文。) 
18    </blockquote>
19    <p>
20      这样,尽管设计者们习惯于过去的想法,将这些状态被应用在专有的超链接上,但它们不是那样有限在CSS2中。理论上任何元素都
>能达到这三种状态,和基于这样状态的样式。这不是传统上的使用情形。 
21    </p>
22    <h3 id=".E6.9C.AA.E6.8C.87.E5.AE.9A.E7.9A.84.E4.BC.AA.E7.B1.B
>B" name=".E6.9C.AA.E6.8C.87.E5.AE.9A.E7.9A.84.E4.BC.AA.E7.B1.BB"> 
23      未指定的伪类
24    </h3>
25    <p>
26      第二篇的问题来自当我们在一个选择器上考虑使用未指定的伪类的效果时。例如:
27    </p>
28    <pre>
29:hover {color: red;}
30</pre>
31    <p>
32      这样等效于CSS2的标准:
33    </p>
34    <pre>
35*:hover {color: red;}
36</pre>
37    <p>
38      哪一个都被解释为“设置任何元素的hover前景色为红色。”所以,段落、表格、标题也在hover范围内,在一个页面中任何
>其它元素的文本将变成红色。 
39    </p>
40    <p>
41      一个公用未指定的类和伪类的hover一起使用的变量,像这样:
42    </p>
43    <pre>
44.nav:hover {color: red;}
45</pre>
46    <p>
47      在这种情况,只有实例的<code>class</code>属性的值是<code>nav</code>位置的超链接时候,
>才能正常工作。无论如何,这种类型的规则经常看见在像这样的联合标记中: 
48    </p>
49    <pre>
50&lt;td class="nav"&gt;
51&lt;a href="one.html" class="nav"&gt;one&lt;/a&gt; | 
52&lt;a href="two.html" class="nav"&gt;two&lt;/a&gt; | 
53&lt;a href="thr.html" class="nav"&gt;three&lt;/a&gt; | 
54&lt;a href="fou.html" class="nav"&gt;four&lt;/a&gt;
55&lt;/td&gt;
56</pre>
57    <p>
58      因为装入的表格有一个<code>class</code>的值是<code>nav</code>,所以当用户的鼠标移动到
>那个单元里面,竖线字符将会变成红色。链接将会在它们hover的时候变成红色。 
59    </p>
60    <h3 id="Gecko.E7.9A.84.E8.A1.8C.E4.B8.BA" name="Gecko.E7.9A.8
>4.E8.A1.8C.E4.B8.BA"> 
61      Gecko的行为
62    </h3>
63    <p>
64      在基于Netscape Gecko的20020410(Netscape 6.1+)版本后构建的浏览器中,<code>:
>hover</code>样式可应用于页面中的任意标签。这样设计者们可以使用未限定的伪类,或者使用未限定的类伪类的这种结合,这样做会 
>出现可见的hover样式的应用会多于它们应有链接的危险。最可靠的解决方法是为选择器添加一个锚元素,像这样: 
65    </p>
66    <pre>
67a:hover {color: red;}
68a.nav:hover {color: red;}
69</pre>
70    <p>
71      在基于Mozilla 1.0和更新版本(Netscape 7+)的浏览器中包含试图消除老文档遗留的问题的代码。如果页面
>运行在“转换显示”模式中,未限定的伪类将受限制只能用于链接。在基于Mozilla 1.3b及更新版本构建的浏览器中,这个转换显示被 
>延伸包括了选择器,关于<code>:hover</code>伪类结合一个未限定的类选择器(详细资料可以查看Bugzilla上的#1 
>69078条目)。 
72    </p>
73    <h3 id=".E5.91.BD.E5.90.8D.E9.94.9A.E8.AE.B0.E7.9A.84.E9.97.A
>E.E9.A2.98" name=".E5.91.BD.E5.90.8D.E9.94.9A.E8.AE.B0.E7.9A.84.E 
>9.97.AE.E9.A2.98"> 
74      命名锚记的问题
75    </h3>
76    <p>
77      除了先前的描述效果之外,有两个其它的相关公共效果可能不是设计者期待的。其中一个被确认容易固定,但另一个有一些微妙。
78    </p>
79    <p>
80      首先,这个问题是设计者打开一个指定的锚记,但它没有关闭。例如:
81    </p>
82    <pre>
83&lt;a name="pagetop"&gt;
84&lt;h2&gt;My Page&lt;/h2&gt;
85</pre>
86    <p>
87      没有a <code>&lt;/a&gt;</code>,这个锚记将在整个文档中有效。这样通常的意思是将获取页面中的ho
>ver样式。考虑到以下规则的效果: 
88    </p>
89    <pre>
90a:hover {color: red;}
91</pre>
92    <p>
93      在一个文档中有一个未关闭的锚记,那么任何文本的样式将是设计者打开标记的前景颜色(除非其它CSS规则干涉)。
94    </p>
95    <p>
96      这里提出的第二个公用问题,哪一个锚记能接受hover样式。虽然,设计者们可能打算把选择器<code>a:hover</
>code>只应用于超链接,它也将应用于锚记,因为选择器只是规定所有的<code>a</code>元素应用哪一个hover样式。为了 
>消除这个问题,设计者应该使用混合的伪类语法来描述CSS2: 
97    </p>
98    <pre>
99a:link:hover {color: red;}
100a:visited:hover {color: maroon;}
101</pre>
102    <p>
103      注意像这样的语法,问题是当它们hover时,visit和未visit时链接不同。以<code>a:hover</cod
>e>为基础时这不是一个问题。当然,这个选择器<code>a:link:hover</code>将只应用于未visit的链接,所以设 
>计者需要一样的样式同时应用于visit和未visit的链接,应该组织把2个选择器放在单一的规则中。 
104    </p>
105    <h3 id=".E6.8E.A8.E8.8D.90" name=".E6.8E.A8.E8.8D.90">
106      推荐
107    </h3>
108    <p>
109      为了避免未预料的问题,设计者们被鼓励在打算用于超链接的动态伪类中包含元素名,以提高<b>健壮性</b>。此外,混合伪类
>要预防hover样式被用于非链接的锚。因此,以a:hover的基础为首选<code>a:hover</code>应该总是代替刚才的 
><code>:hover</code>和<code>a:link:hover</code>(和<code>a:visited:ho 
>ver</code>)。 
110    </p>
111    <h3 id=".E7.9B.B8.E5.85.B3.E9.93.BE.E6.8E.A5" name=".E7.9B.B8
>.E5.85.B3.E9.93.BE.E6.8E.A5"> 
112      相关链接
113    </h3>
114    <ul>
115      <li>
116        <a class="external" href="http://www.w3.org/TR/CSS2/selec
>tor.html#x36">The dynamic pseudo-classes:&nbsp;:hover,&nbsp;:acti 
>ve, and&nbsp;:focus</a> 
117      </li>
118    </ul>
119    <div class="originaldocinfo">
120      <h3 id=".E6.96.87.E7.AB.A0.E5.8E.9F.E5.A7.8B.E4.BF.A1.E6.81
>.AF" name=".E6.96.87.E7.AB.A0.E5.8E.9F.E5.A7.8B.E4.BF.A1.E6.81.AF 
>"> 
121        文章原始信息
122      </h3>
123      <ul>
124        <li>作者: Eric A. Meyer, Netscape Communications
125        </li>
126        <li>最后更新: Published 07 Mar 2003; Revised 21 Mar 2003
127        </li>
128        <li>版权信息: Copyright © 2001-2003 Netscape. All rights rese
>rved. 
129        </li>
130        <li>注意: This reprinted article was originally part of the
> DevEdge site. 
131        </li>
132      </ul>
133    </div>

返回历史