#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)》 第六章》——译者注)。










