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

那么这个对于解决 >子选择符的问题有什么帮助呢?是这样,如果一条权重值(优先级)为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)之后的样式规则变成了

#menu li.folder { ... }

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

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

文件下载及更新说明:

文件下载:

Version 3.11 (:hover, :active and :focus) 
 
(:hover, :active 和 :focus)


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 的更详细的文章(德语版)。对于不懂德语的网友,可以查看该文章的英文翻译版

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wdxfdd.html