使ie6 支持:hover等伪类

最新推荐文章于 2025-12-10 20:36:34 发布

原创最新推荐文章于 2025-12-10 20:36:34 发布 · 3.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ie #function #css #浏览器 #features #webkit

本文介绍了一种使用JavaScript和CSS结合的方法，解决IE6浏览器不支持:hover伪类的问题，通过添加和移除特定类实现鼠标悬停效果。

由于万恶的ie6 ，对伪类:hover 等伪类支持的欠缺。所有需要用js+css 来弥补这个缺陷，让你的页面能兼容IE6 正常显示。

原理：针对ie6，改变目标className为 className_hover。当然，在css样式中要有对应的样式。

css 中这样写 className:hover, className_hover{....................}

//***************************************************** // s使ie6 支持:hover 浏览器版本判断 // 作用：让所有标记支持hover // 原理：鼠标经过，和移开，更改标签样式 // 需要在CSS文件中 // 如：e:hover ,e_hover{.......} // e_hover是js 给标签添加的样式 //***************************************************** // 浏览器版本判断 var Client = { Engine: {'name': 'unknown', 'version': ''}, Features: {} }; Client.Features.xhr = !!(window.XMLHttpRequest); Client.Features.xpath = !!(document.evaluate); if (window.opera) Client.Engine.name = 'opera'; else if (window.ActiveXObject) Client.Engine = {'name': 'ie', 'version': (Client.Features.xhr) ? 7 : 6}; else if (!navigator.taintEnabled) Client.Engine = {'name': 'webkit', 'version': (Client.Features.xpath) ? 420 : 419}; else if (document.getBoxObjectFor != null) Client.Engine.name = 'gecko'; Client.Engine[Client.Engine.name] = Client.Engine[Client.Engine.name + Client.Engine.version] = true; //所有标签支持:hover //不推荐：响应会很慢 function $(){ var obj=document.all; for(var i=0;i<obj.length;i++){ obj[i].onmouseover=function(){ this.tmpClass=this.className; this.className+="_hover"; } obj[i].onmouseout=function(){ this.className=this.tmpClass; } } } //e对象下的所有tag支持:hover //推荐这种方法 function $2(e, tag){ var pr=document.getElementById(e).getElementsByTagName(tag); for(var i=0;i<pr.length;i++){ pr[i].onmouseover=function(){ this.tmpClass=this.className; this.className+="_hover"; } pr[i].onmouseout=function(){ this.className=this.tmpClass; } } }