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

这很酷，因为这使你可以仅通过 css来对表格行(

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

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

使用方法

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

<span style="COLOR: #a31515">body </span>{ <span style="COLOR: red">behavior</span>: <span style="COLOR: blue">url("csshover3.htc")</span>; }

工作原理

所有的浏览器都提供了一些方法，让你用 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 不支持子选择符 ‘>'，子选择符可以完美地显示下级子菜单，而不是连更深层的菜单一起显示出来。

<span style="COLOR: #a31515">li:hover > ul </span>{ <span style="COLOR: green">/* 在 IE 下无效 */ </span>}

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

<span style="COLOR: #a31515">ul ul </span>{ <span style="COLOR: red">display</span>:<span style="COLOR: blue">none</span>; }<br><span style="COLOR: #a31515">li:hover ul </span>{ <span style="COLOR: red">display</span>:<span style="COLOR: blue">block</span>; }

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

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

<span style="COLOR: green">/* 2 和 13 */<br></span><span style="COLOR: #a31515">ul ul</span>, <span style="COLOR: #a31515">li:hover ul ul </span>{ <span style="COLOR: red">display</span>:<span style="COLOR: blue">none</span>; }<br><span style="COLOR: green">/* 12 和 23*/<br></span><span style="COLOR: #a31515">li:hover ul</span>, <span style="COLOR: #a31515">li:hover li:hover ul </span>{ <span style="COLOR: red">display</span>:<span style="COLOR: blue">block</span>; }

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

脚本事件的性能优化

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

<span style="COLOR: #a31515">#menu li:hover ul </span>{ ... }

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

<span style="COLOR: #a31515">#menu li </span>{ ... }

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

<span style="COLOR: #a31515">#menu li.folder </span>{ ... }

<span style="COLOR: #a31515">AddType text</span>/<span style="COLOR: #a31515">x-component .htc</span>