Whatever:hover 无需javascript让IE支持丰富伪类_javascript技巧

程序员文章站 2022-05-24 18:57:04

...

这很酷，因为这使你可以仅通过 css来对表格行()应用鼠标滑过事件(mouseover)时的特殊效果。然而，万恶的IE，对 :hover伪类顶多只提供了有限的支持，具体支持的程度要取决于你的IE浏览器的具体版本。

Whatever:hover 是一个小小的脚本，它可以迅速、自动地为IE6，IE7，IE8添加标准的 :hover、:active 和:focus 伪类支持。第三版引入了 ajax 支持，意味着通过 javascript动态添加到文档中的任意html元素也同样可以在IE中响应 :hover、:active 和 :focus 样式。

如果你已经对使用 whatever:hover 很熟练，现在只是想下载它，你可以直接跳转到获取最新版本。而对于其它想深入了解它的人，请继续阅读。

使用方法

你只需要将 whatever:hover 链接到 body 元素就可以了。注意这里的 behavior 属性中的 URL 是相对于 html 文件的，而不是像背景图片地址一样是相对于 css 文件的路径。

body { behavior: url("csshover3.htc"); }

工作原理

所有的浏览器都提供了一些方法，让你用 javascript 查询样式表中定义好的规则或者动态地插入新规则。正常情况下，IE对所有它不支持的规则返回 “unknown”。例如：一条关于 “div p:first-child” 的规则将会被改成 "divp:unknown”，而一条关于 "p a[href]” 的规则将整体地作为 "unknown" 返回。幸运的是 IE 把 :hover伪类认为是它支持的样式规则，并且会将它保持原样。

IE 还支持所谓的行为（behaviors），不仅包括预定义的功能比如动态加载内容或者持续数据存储，也包括你可以在一个后缀为 .htc 或者 .hta 为的文件中创建的自定义行为。这些行为通过 css 实现与 html 节点关联，并“增强”这些被指定行为中的样式选择器选中的节点。

综上所述，创建一个行为来查找样式表中 IE 不支持的元素，并以一些其它手段“欺骗”影响的到元素让它们应用样式表中关联的样式。这个复杂的操作中包含的步骤大致可以描述为：

在所有的样式表中搜索 IE 不支持的 :hover 伪类规则；
插入一条 IE 支持的，例如带 class 名称的新规则；
最后，设置脚本事件来切换目标元素的 class 名称。

通过这种方式，:hover、:active 和 :focus 就可以得到（IE 的）支持了。而作为开发人员，你除了包含这个行为以外不需要做任何事。所有的工作都将自动完成。

与第1版和第2版比较，第3版对动态加入的 html (ajax) 也同样支持。另外还有一个改动是原来第1版和第2版采用的是在页面加载事件中主动搜索影响到的元素，而在第3版中改为借助表达式（expressions）让节点自己回调。关于这部分你可以阅读带注释的版本获取更多细节。

示例：菜单效果

:hover 一个很常见的用途就是用列表创建菜单系统。用这个行为来创建一个两级的菜单系统是再容易不过的事情了。例如，如果你从 suckerfish dropdown （一个带有下拉菜单的网页，关于这个页面和效果的描述，参见 A List Apart article）上把 javascript 删除掉了，它仍然能正常工作。

但是多级的菜单需要做不同的处理。这是由于 IE 不支持子选择符 ‘>'，子选择符可以完美地显示下级子菜单，而不是连更深层的菜单一起显示出来。

li:hover > ul { /* 在 IE 下无效 */ }

有一种可供选择的方法可以只使用简单的子孙选择符来模拟这种行为（主要是针对 IE）。还有种不太成熟的方法是应用多个类定义，但是更简单的方法是利用 CSS 选择符的不同优先级(specificity).每一条 css 规则都有特定的重要等级，这个等级可以简单地根据一条规则中的不同元素来计算。以元素名称为基准值 “1″，类、伪类和属性选择符重要性（权重）为 “10″，然后元素 id 为 “100″。比如下面的例子。

ul ul { display:none; }
li:hover ul { display:block; }

这样做能够生效的原因，就是选择符的优先级不同。第一条规则只包含两个元素名称，这样它的权重值（优先级）就是2。第二条规则也包含两个元素名称，但是 :hover 伪类的权重值（优先级）是10，所以加起来的值就是12。由于第二条规则比第一条规则优先，因此被鼠标滑过的 li 元素内部的ul 将被显示。

那么这个对于解决 >子选择符的问题有什么帮助呢？是这样，如果一条权重值（优先级）为12的规则定义所有的子菜单都要显示，我们只需要创建一条权重值（优先级）大于12的规则来把下一级的菜单隐藏起来。然后，那个菜单又需要另一条优先级更高的规则来显示，一直循环下去。对于3级的导航来说，需要的 css代码短得让人意外：

/* 2 和 13 */
ul ul, li:hover ul ul { display:none; }
/* 12 和 23*/
li:hover ul, li:hover li:hover ul { display:block; }

这种方式可以无需附加任何类样式实现无限级嵌套菜单（4级或更多级需要需要继续添加更多规则）。

脚本事件的性能优化

现在还剩下一件事需要考虑。.htc 文件在所有样式表文件中搜索 :hover 规则，并且按照 css 文件的定义对所有它认为需要用脚本处理停留效果的元素附加鼠标滑过和移出事件。为了找出这些(被影响的)元素，所有去掉 :hover 伪类选择到的元素以及被 :hover 伪类修饰的元素本身，都会被选择并且进行处理。一条类似这样的规则

#menu li:hover ul { ... }

…将会被调整成下面这样来查找所有可能需要响应鼠标滑过事件的元素：

#menu li { ... }

很显然这会选中整个菜单中的每一个

元素，并对其中一大堆不需要鼠标事件（在当前情况下）的元素附加事件。这个问题可以很轻松地得到解决，我们可以对包含子菜单的列表元素添加一个类样式，比如 "folder"。这样一来，调整（去除:hover）之后的样式规则变成了

#menu li.folder { ... }

…可以高效地直接选中那些真正需要事件的元素。缺点是为了改善脚本的性能，你需要添加一个类样式（这个类样式的添加纯粹是为了视觉效果，而且放弃了li:hover 方式实现菜单的通用性）。但是，从另一个角度考虑的话，也许你反正也要用一个类来把这些列表元素与普通元素区别开来，那就无所谓了。

为了直观地说明上述问题，请查看综合示例。希望你喜欢。

文件下载及更新说明：

文件下载:

Version 3.11 (:hover, :active and :focus)
(:hover, :active 和 :focus)
Minified, 2.8K (right click & save) | commented, 9.7K | both, zipped

Version 1.42.060206 (:hover and :active) download | view
Version 2.02.060206 (1.42 and :focus) download | view

说明:

说明1：如果在使用 whatever:hover 的过程中遇到问题，请让我知道! 由于第3版比较新，可能会存在一些无法预知的问题。

说明2：确保你的web服务器把 htc 文件按照 text/x-component 的 mime类型发送。关于这方面的更多信息，可以参阅 Aldo的个人博客。如果你的主机支持 .htaccess 文件，可以添加下面这行代码：

AddType text/x-component .htc

说明3：第三版支持在 IE6 以上版本中使用 :hover 和 :active，对 IE7 和 IE8 还支持:focus。由于表达式（expression)在 IE8 标准模式下不支持，所以 whatever:hover 只在 IE8 的怪异模式(Quirks Mode) 下运行。实际上在 IE8 标准模式中也根本不需要这个脚本了。

说明4：如果使用这个脚本之后网页变慢，请尝试对更加具体的选择符运用 :hover伪类，比如添加元素名称、使用元素id，或者类名称。例如："div#someId li.group:hover”, 而不要只用".group:hover”。这样能够很大程度上减少搜索和解析时间，并能减少需要应用的事件。请阅读性能优化获得更多信息。

说明5：第2版也支持 :focus 伪类，仅限于 A、INPUT、和 TEXTAREA元素。但是，由于类似"input:focus" 这样的选择符被 IE 的样式表对象返回为 "input:unknown"，脚本将基于这些 "unkonwn"规则来附加获得焦点和失去焦点事件，这个问题同样存在于其它浏览器无法识别的伪类。因此，使用2.0版本的时候，你无法在 IE 中对A、INPUT和 TEXTAREA元素应用浏览器无法识别的伪类，因为他们统统都会被处理成获得焦点样式。如果你确实需要这个功能，请使用1.4版或者3.0版。

在 Naar Voren （一个关于web开发的德语网站）上，有我用德语写的一篇关于用纯css 在菜单系统中使用 :hover 的更详细的文章（德语版）。对于不懂德语的网友，可以查看该文章的英文翻译版。

非常感谢 Arnoud Berendsen 和 Martin Reurings 提供的创意和支持，感谢 Robert Jan Verkade 和 Naar Voren 上的朋友们发表我的文章，还要感谢 Eric Meyer 对这个脚本给予支持和在他的书里提到我的这个网页（指《Eric Meyer谈CSS（卷2）》第六章》——译者注）。

作者：peter ned 原文：whatever:hover

译者：小李刀刀首发：Whatever:hover – 无需javascript让IE支持丰富伪类

转载请注明出处。
上面的文件，脚本之家打包下载地址