发行任意元素的hover的起因

From MDC

目录 1 Hover和非链接元素 2 未指定的伪类 3 Gecko的行为 4 命名锚记的问题 5 推荐 6 相关链接 7 文章原始信息

很多设计者都使用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的行为

在基于Netscape Gecko的20020410(Netscape 6.1+)版本后构建的浏览器中，:hover样式可应用于页面中的任意标签。这样设计者们可以使用未限定的伪类，或者使用未限定的类伪类的这种结合，这样做会出现可见的hover样式的应用会多于它们应有链接的危险。最可靠的解决方法是为选择器添加一个锚元素，像这样：

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

在基于Mozilla 1.0和更新版本(Netscape 7+)的浏览器中包含试图消除老文档遗留的问题的代码。如果页面运行在“转换显示”模式中，未限定的伪类将受限制只能用于链接。在基于Mozilla 1.3b及更新版本构建的浏览器中，这个转换显示被延伸包括了选择器，关于:hover伪类结合一个未限定的类选择器（详细资料可以查看Bugzilla上的#169078条目）。

[编辑] 命名锚记的问题

除了先前的描述效果之外，有两个其它的相关公共效果可能不是设计者期待的。其中一个被确认容易固定，但另一个有一些微妙。

首先，这个问题是设计者打开一个指定的锚记，但它没有关闭。例如：

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

没有a </a>，这个锚记将在整个文档中有效。这样通常的意思是将获取页面中的hover样式。考虑到以下规则的效果：

a:hover {color: red;}

在一个文档中有一个未关闭的锚记，那么任何文本的样式将是设计者打开标记的前景颜色（除非其它CSS规则干涉）。

这里提出的第二个公用问题，哪一个锚记能接受hover样式。虽然，设计者们可能打算把选择器a:hover只应用于超链接，它也将应用于锚记，因为选择器只是规定所有的a元素应用哪一个hover样式。为了消除这个问题，设计者应该使用混合的伪类语法来描述CSS2：

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

注意像这样的语法，问题是当它们hover时，visit和未visit时链接不同。以a:hover为基础时这不是一个问题。当然，这个选择器a:link:hover将只应用于未visit的链接，所以设计者需要一样的样式同时应用于visit和未visit的链接，应该组织把2个选择器放在单一的规则中。

[编辑] 推荐

为了避免未预料的问题，设计者们被鼓励在打算用于超链接的动态伪类中包含元素名，以提高健壮性。此外，混合伪类要预防hover样式被用于非链接的锚。因此，以a:hover的基础为首选a:hover应该总是代替刚才的:hover和a:link:hover（和a:visited:hover）。

[编辑] 相关链接

• The dynamic pseudo-classes: :hover, :active, and :focus