body { behavior: url("csshover3.htc"); }[h2]工作原理[/h2] 所有的浏览器都提供了一些方法,让你用 javascript 查询样式表中定义好的规则或者动态地插入新规则。正常情况下,IE对所有它不支持的规则返回 “unknown”。例如:一条关于 “div p:first-child” 的规则将会被改成 "divp:unknown”, 而一条关于 "p a[href]” 的规则将整体地作为 "unknown" 返回。幸运的是 IE 把 :hover伪类认为是它支持的样式规则,并且会将它保持原样。 IE 还支持所谓的[url=http://msdn.microsoft.com/zh-cn/library/ms531078.aspx]行为(behaviors)[/url],不仅包括预定义的功能比如动态加载内容或者持续数据存储,也包括你可以在一个后缀为 .htc 或者 .hta 为的文件中创建的自定义行为。这些行为通过 css 实现与 html 节点关联,并“增强”这些被指定行为中的样式选择器选中的节点。 综上所述,创建一个行为来查找样式表中 IE 不支持的元素,并以一些其它手段“欺骗”影响的到元素让它们应用样式表中关联的样式。这个复杂的操作中包含的步骤大致可以描述为: [list] [*]在所有的样式表中搜索 IE 不支持的 :hover 伪类规则; [/*][*]插入一条 IE 支持的,例如带 class 名称的新规则; [/*][*]最后,设置脚本事件来切换目标元素的 class 名称。 [/*][/list] 通过这种方式,:hover、:active 和 :focus 就可以得到(IE 的)支持了。而作为开发人员,你除了包含这个行为以外不需要做任何事。所有的工作都将自动完成。 与第1版和第2版比较,第3版对动态加入的 html (ajax) 也同样支持。另外还有一个改动是原来第1版和第2版采用的是在页面加载事件中主动搜索影响到的元素,而在第3版中改为借助表达式([url=http://msdn.microsoft.com/zh-cn/library/ms537634.aspx]expressions[/url])让节点自己回调。关于这部分你可以阅读带注释的版本获取更多细节。 [h2]示例:菜单效果[/h2] :hover 一个很常见的用途就是用列表创建菜单系统。用这个行为来创建一个两级的菜单系统是再容易不过的事情了。例如,如果你从 [url=http://www.htmldog.com/articles/suckerfish/example/]suckerfish dropdown[/url] (一个带有下拉菜单的网页,关于这个页面和效果的描述,参见 [url=http://www.alistapart.com/articles/dropdowns/]A List Apart article[/url])上把 javascript 删除掉了,它仍然能正常工作。 但是多级的菜单需要做不同的处理。这是由于 IE 不支持子选择符 ‘>',子选择符可以完美地显示下级子菜单,而不是连更深层的菜单一起显示出来。
li:hover > ul { /* 在 IE 下无效 */ }有一种可供选择的方法可以只使用简单的子孙选择符来模拟这种行为(主要是针对 IE)。还有种不太成熟的方法是应用多个类定义,但是更简单的方法是利用 CSS 选择符的不同[url=http://www.w3.org/TR/CSS21/cascade.html#specificity]优先级(specificity)[/url].每一条 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级或更多级需要需要继续添加更多规则)。 [h2][url=http://www.xs4all.nl/examples/cssmenu.html]综合示例[/url]。希望你喜欢。
AddType text/x-component .htc[i]说明3:第三版支持在 IE6 以上版本中使用 :hover 和 :active,对 IE7 和 IE8 还支持:focus。由于表达式(expression)在 IE8 标准模式下不支持,所以 whatever:hover 只在 IE8 的怪异模式(Quirks Mode) 下运行。实际上在 IE8 标准模式中也根本不需要这个脚本了。 [/i] [i]说明4:如果使用这个脚本之后网页变慢,请尝试对更加具体的选择符运用 :hover伪类,比如添加元素名称、使用元素id,或者类名称。例如:"div#someId li.group:hover”, 而不要只用".group:hover”。这样能够很大程度上减少搜索和解析时间,并能减少需要应用的事件。请阅读 [url=http://wukangrui.com/2009/06/22/whatever-hover-pseudo-class-without-javascript.html#optimizing]性能优化[/url] 获得更多信息。[/i] [i]说明5:第2版也支持 :focus 伪类,仅限于 A、INPUT、和 TEXTAREA元素。但是,由于类似"input:focus" 这样的选择符被 IE 的样式表对象返回为 "input:unknown",脚本将基于这些 "unkonwn"规则来附加获得焦点和失去焦点事件,这个问题同样存在于其它浏览器无法识别的伪类。因此,使用2.0版本的时候,你无法在 IE 中对A、INPUT和 TEXTAREA元素应用浏览器无法识别的伪类,因为他们统统都会被处理成获得焦点样式。如果你确实需要这个功能,请使用1.4版或者3.0版。[/i] 在 [url=http://www.naarvoren.nl/]Naar Voren[/url] (一个关于web开发的德语网站)上,有我用德语写的一篇关于用纯css [url=http://www.naarvoren.nl/artikel/hover.html]在菜单系统中使用 :hover[/url] 的更详细的文章(德语版)。对于不懂德语的网友,可以查看该文章的[url=http://www.xs4all.nl/hovercraft.html]英文翻译版[/url]。 非常感谢 Arnoud Berendsen 和 [url=http://www.windgazer.nl/]Martin Reurings[/url] 提供的创意和支持,感谢 [url=http://www.eend.nl/log/]Robert Jan Verkade[/url] 和 Naar Voren 上的朋友们发表我的文章,还要感谢 [url=http://www.meyerweb.com/]Eric Meyer[/url] 对这个脚本给予支持和在他的书里提到我的这个网页(指 《[url=http://www.china-pub.com/38007]Eric Meyer谈CSS(卷2)[/url]》 第六章》——译者注)。 作者:[url=http://www.xs4all.nl/~peterned/]peter ned[/url] 原文:[url=http://www.xs4all.nl/~peterned/csshover.html]whatever:hover[/url] 译者:[url=http://wukangrui.net/]小李刀刀[/url] 首发:[url=http://wukangrui.net/2009/06/22/whatever-hover-pseudo-class-without-javascript.html]Whatever:hover – 无需javascript让IE支持丰富伪类[/url] 转载请注明出处。 上面的文件,[url=http://xiazai.jb51.net/201006/yuanma/csshover_all.rar]编程素材网打包下载地址[/url]
机械节能产品生产企业官网模板...
大气智能家居家具装修装饰类企业通用网站模板...
礼品公司网站模板
宽屏简约大气婚纱摄影影楼模板...
蓝白WAP手机综合医院类整站源码(独立后台)...苏ICP备2024110244号-3 苏公网安备32050702011978号 增值电信业务经营许可证编号:苏B2-20251499 | Copyright 2018 - 2026 源码网商城 (www.yuanmawang.com) 版权所有