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

2019-06-06 00:27:07王振洲

但是多级的菜单需要做不同的处理。这是由于 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 { ... }

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