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


Posted in Javascript onJune 29, 2010

这很酷,因为这使你可以仅通过 css来对表格行(<tr>)应用鼠标滑过事件(mouseover)时的特殊效果。然而,万恶的IE,对 :hover伪类顶多只提供了有限的支持,具体支持的程度要取决于你的IE浏览器的具体版本。

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

 

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

使用方法

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

body { behavior: url("csshover3.htc"); }

工作原理

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

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)之后的样式规则变成了

#menu li.folder { ... }

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

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

文件下载及更新说明:

Javascript 相关文章推荐
Jquery实现搜索框提示功能示例代码
Aug 13 Javascript
使用javascript实现页面定时跳转总结篇
Sep 21 Javascript
JS两种定义方式的区别、内部原理
Nov 21 Javascript
jQuery截取指定长度字符串代码
Aug 21 Javascript
浅谈Sizzle的“编译原理”
Apr 14 Javascript
JS组件Bootstrap实现图片轮播效果
May 16 Javascript
js代码延迟一定时间后执行一个函数的实例
Feb 15 Javascript
JavaScript实现前端实时搜索功能
Mar 26 Javascript
JS HTML图片显示Canvas 压缩功能
Jul 21 Javascript
vue.js  父向子组件传参的实例代码
Oct 29 Javascript
JS实现简单的抽奖转盘效果示例
Feb 16 Javascript
js prototype和__proto__的关系是什么
Aug 23 Javascript
javascript hasFocus使用实例
Jun 29 #Javascript
jquery photoFrame 图片边框美化显示插件
Jun 28 #Javascript
使用jQuery.Validate进行客户端验证(初级篇) 不使用微软验证控件的理由
Jun 28 #Javascript
jquery获取ASP.NET服务器端控件dropdownlist和radiobuttonlist生成客户端HTML标签后的value和text值
Jun 28 #Javascript
Jquery ui css framework
Jun 28 #Javascript
Javascript创建Silverlight Plugin以及自定义nonSilverlight和lowSilverlight样式
Jun 28 #Javascript
JavaScript Tips 使用DocumentFragment加快DOM渲染速度
Jun 28 #Javascript
You might like
php mysql_real_escape_string函数用法与实例教程
2013/09/30 PHP
PHP页面中文乱码分析
2013/10/29 PHP
php中get_meta_tags()、CURL与user-agent用法分析
2014/12/16 PHP
php查询mysql数据库并将结果保存到数组的方法
2015/03/18 PHP
CI框架教程之优化验证码机制详解【验证码辅助函数】
2019/04/16 PHP
laravel-admin 后台表格筛选设置默认的查询日期方法
2019/10/03 PHP
javascript优先加载笔记代码
2008/09/30 Javascript
js修改table中Td的值(定义td的双击事件)
2013/01/10 Javascript
简单实例处理url特殊符号&amp;处理(2种方法)
2013/04/02 Javascript
多次注册事件会导致一个事件被触发多次的解决方法
2013/08/12 Javascript
js图片自动轮播代码分享(js图片轮播)
2014/05/06 Javascript
我的Node.js学习之路(四)--单元测试
2014/07/06 Javascript
js实现ArrayList功能附实例代码
2014/10/29 Javascript
JavaScript中的fontsize()方法使用详解
2015/06/08 Javascript
javascript中错误使用var造成undefined
2016/03/31 Javascript
浅谈javascript的url参数parse和build函数
2017/03/04 Javascript
JavaScript使用ZeroClipboard操作剪切板
2017/05/10 Javascript
javascript中mouseenter与mouseover的异同
2017/06/06 Javascript
VUE利用vuex模拟实现新闻点赞功能实例
2017/06/28 Javascript
jQuery基于随机数解决中午吃什么去哪吃问题示例
2018/12/29 jQuery
jQuery操作attr、prop、val()/text()/html()、class属性
2019/05/23 jQuery
在Webpack中用url-loader处理图片和字体的问题
2020/04/28 Javascript
[01:18:31]DOTA2-DPC中国联赛定级赛 LBZS vs Magma BO3第一场 1月10日
2021/03/11 DOTA
Python实现的径向基(RBF)神经网络示例
2018/02/06 Python
Python决策树之基于信息增益的特征选择示例
2018/06/25 Python
Python3对称加密算法AES、DES3实例详解
2018/12/06 Python
浅谈python常用程序算法
2019/03/22 Python
Python使用gluon/mxnet模块实现的mnist手写数字识别功能完整示例
2019/12/18 Python
python爬虫请求头的使用
2020/12/01 Python
Html5 滚动穿透的方法
2019/05/13 HTML / CSS
医药工作岗位求职信分享
2013/12/31 职场文书
银行职员个人的工作自我评价
2014/02/15 职场文书
小学标准化建设汇报材料
2014/08/16 职场文书
2015年党员创先争优公开承诺书
2015/04/27 职场文书
会议承办单位欢迎词
2019/07/09 职场文书
python playwright 自动等待和断言详解
2021/11/27 Python