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

这很酷,因为这使你可以仅通过 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 方式实现菜单的通用性)。但是,从另一个角度考虑的话,也许你反正也要用一个类来把这些列表元素与普通元素区别开来,那就无所谓了。

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

文件下载及更新说明:

文件下载:

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

作者:peter ned 原文:whatever:hover

译者:小李刀刀 首发:Whatever:hover – 无需javascript让IE支持丰富伪类

转载请注明出处。
上面的文件,打包下载地址

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索hover
, 伪类
Whatever
javascript伪类、javascript技巧、javascript高级技巧、javascript调试技巧、javascript小技巧,以便于您获取更多的相关知识。

时间: 2025-01-21 11:37:04

Whatever:hover 无需javascript让IE支持丰富伪类_javascript技巧的相关文章

Javascript实现的简单右键菜单类_javascript技巧

本文实例讲述了Javascript实现的简单右键菜单类.分享给大家供大家参考.具体如下: 这是自己写的一个右键菜单类,屏蔽掉了IE固有的右键菜单,一共有四个参数:第一个是出发显示右键菜单的div的id 第二个是右键菜单这个层的id,根据这个id去创建一个新的层,menuList是菜单项的列表,对应了点击一个菜单项后触发的函数,classList是菜单的class名称,以及菜单项对应的class名称,包含了鼠标滑过时的class. 运行效果截图如下: 在线演示地址如下: http://demo.j

JavaScript实现的一个倒计时的类_javascript技巧

近期在做排列五的彩票项目,每一期都有购彩时段,即用户打开这个排列五的页面时,会从服务器传来一个remaintime(离本次彩期结束的剩余时间),然后这个时间在客户端递减呈现给用户看,让用户获得本次彩期的剩余时间. 实现原理挺简单的,在此不在赘述,运行以下代码查看demo: <!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html;

javascript下高性能字符串连接StringBuffer类_javascript技巧

复制代码 代码如下: function StringBuffer(){ this.__strings__ = new Array(); } StringBuffer.prototype.append = function(str){ this.__strings__.push(str); }; StringBuffer.prototype.toString = function(){ this.__strings__.join(" "); }; 其实上面的代码,主要利用了js的数组原理

javascript实现倒计时并弹窗提示特效_javascript技巧

在前端开发中,难免会用到倒计时.如做的双十一活动,在距活动开始的半个月前需要做些宣传工作,需要告知用户优惠活动什么时候开始.这个时候就要用到倒计时,如在整站的某个页面提醒用户活动什么时候开始等.而在活动的后期,特别是在距活动结束仅有1天左右时,就要用到弹窗倒计时.这个倒计时设置在整站的首页顶部(当然也可以设置在其它地方,如首页中部等),并设置弹窗弹出10秒后自动消失,由用户决定是否点击到相应的活动页面,购买产品. 需要的技术支持:CSS3,jQuery库: HTML代码如下: <section

JavaScript中对象的不同创建方法_javascript技巧

javascript中的对象与一般的面向对象的程序设计语言(c++,Java等)不同,甚至很少有人说它是面向对象的程序设计语言,因为它没有类.javaScript只有对象,不是类的实例.javascript中的对象是基于原型的. 1.1句点运算符创建 javascript中的对象实际上就是一个由属性组成的关联数组,属性由名称和值组成,值的类型可以是任何数据类型,或者函数和其他对象. 创建一个简单对象: var foo = {}; foo.prop_1 = 'bar'; foo.prop_2 =

纯Javascript实现Windows 8 Metro风格实现_javascript技巧

Metro风格设计主要特点 1.Windows 8 Metro风格设计,实现网站或系统功能的导航 2.纯Javascript实现 3.支持所有IE.360.Chrome等常用浏览器 4.支持圆角.阴影.卡片切换等特效 5.支持卡片的放大.缩小.增加.删除等功能 6.可自定义卡片背景色.背景图片.卡片图片.卡片文字 7.卡片间可任意切换 Metro风格截图  Metro部分算法 卡片显示部分代码: 复制代码 代码如下: str='<li data-mode="flip" id=&q

在IE中用javascript配合&amp;nbsp;使用first-child伪类

制作符合web标准的网页,经常需要定义某个父元素下的第一个子(child)元素或最后一个元素,以便将其与其他元素区分开来,有利于实现某些特殊需求.最浅显的例子是,导航项目间的竖线,我们往往通过border或者background来实现.特殊需求是,第一项左边无竖线或最后一项右边无竖线. 那么区分第一项好呢,还是最后一项好?答案是明显的,逼不得已,不要用区别最后一项.按照一般的编程方法,控制第一项要比控制最后一项容易得多. 区分第一项的还有一个好处是,CSS有一个:first-child的伪元素(

JavaScript更改class和id的方法_javascript技巧

是className,可不是class 注意JavaScript使用的是className去访问class属性,因为class是一个保留关键字,因为将来JavaScript可能开始支持像Java一样的类. 我们在讨论style属性时遇到了棘手的细节问题和浏览器差异性带来的麻烦,正如同经历一场惊涛骇浪.而class和id的更改则像是沙漠里一片平静的绿洲,浏览器们在这里和谐相处.思考这个例子: p { color: #000000; /* black */ } p.emphasis { color:

利用原生JavaScript获取元素样式只是获取而已_javascript技巧

ps:是获取样式,不是设置样式.若没有给元素设置样式值,则返回浏览器给予的默认值.(论坛整理) 1.element.style:只能获取写在元素标签中的style属性里的样式值,无法获取到定义在<style></style>和通过<link href="css.css">加载进来的样式属性 复制代码 代码如下: var ele = document.getElementById('ele'); ele.style.color; //获取颜色 2.wi