【技术帖】IE6所有标签元素支持hover伪类的解决方案

简介: IE6是个顽皮的大爷。为了实现一些简单的效果,我们通常要做许多事情。比如li:hover ,td :hover这些东西,IE6向来不看。   解决办法网上有许多,亲试了许多,只有以下才能解决,就是加一个tc文件就可以了!! 步骤: 1.

IE6是个顽皮的大爷。为了实现一些简单的效果,我们通常要做许多事情。比如li:hover ,td :hover这些东西,IE6向来不看。

 

解决办法网上有许多,亲试了许多,只有以下才能解决,就是加一个tc文件就可以了!!

步骤:

1.在你的网页的同级目录下创建一个叫做iehoverfix.htc的文件,并在里面复制进去如下内容

iehoverfix.htc文件内容:---------------------------------------------------此行不复制----------------------------------------------/*解决ie6.0 的hover兼容问题*/<attach event=”ondocumentready” handler=”parseStylesheets” /><script>var csshoverReg = /(^|\s)(([^a]([^ ]+)?)|(a([^#.][^ ]+)+)):(hover|active)/i,currentSheet, doc = window.document, hoverEvents = [], activators = {onhover:{on:’onmouseover’, off:’onmouseout’},onactive:{on:’onmousedown’, off:’onmouseup’}}function parseStylesheets() {if(!/MSIE (5|6)/.test(navigator.userAgent)) return;window.attachEvent(‘onunload’, unhookHoverEvents);var sheets = doc.styleSheets, l = sheets.length;for(var i=0; i<l; i++)parseStylesheet(sheets[i]);}function parseStylesheet(sheet) {if(sheet.imports) {try {var imports = sheet.imports, l = imports.length;for(var i=0; i<l; i++) parseStylesheet(sheet.imports[i]);} catch(securityException){}}try {var rules = (currentSheet = sheet).rules, l = rules.length;for(var j=0; j<l; j++) parseCSSRule(rules[j]);} catch(securityException){}}function parseCSSRule(rule) {var select = rule.selectorText, style = rule.style.cssText;if(!csshoverReg.test(select) || !style) return;var pseudo = select.replace(/[^:]+:([a-z-]+).*/i, ‘on$1′);var newSelect = select.replace(/(\.([a-z0-9_-]+):[a-z]+)|(:[a-z]+)/gi, ‘.$2′ + pseudo);var className = (/\.([a-z0-9_-]*on(hover|active))/i).exec(newSelect)[1];var affected = select.replace(/:(hover|active).*$/, ”);var elements = getElementsBySelect(affected);if(elements.length == 0) return;currentSheet.addRule(newSelect, style);for(var i=0; i<elements.length; i++)new HoverElement(elements[i], className, activators[pseudo]);}function HoverElement(node, className, events) {if(!node.hovers) node.hovers = {};if(node.hovers[className]) return;node.hovers[className] = true;hookHoverEvent(node, events.on, function() { node.className += ‘ ‘ + className; });hookHoverEvent(node, events.off, function() { node.className = node.className.replace(new RegExp(‘\\s+’+className, ‘g’),”); });}function hookHoverEvent(node, type, handler) {node.attachEvent(type, handler);hoverEvents[hoverEvents.length] = {node:node, type:type, handler:handler};}function unhookHoverEvents() {for(var e,i=0; i<hoverEvents.length; i++) {e = hoverEvents[i];e.node.detachEvent(e.type, e.handler);}}function getElementsBySelect(rule) {var parts, nodes = [doc];parts = rule.split(‘ ‘);for(var i=0; i<parts.length; i++) {nodes = getSelectedNodes(parts[i], nodes);}    return nodes;}function getSelectedNodes(select, elements) {var result, node, nodes = [];var identify = (/\#([a-z0-9_-]+)/i).exec(select);if(identify) {var element = doc.getElementById(identify[1]);return element? [element]:nodes;}var classname = (/\.([a-z0-9_-]+)/i).exec(select);var tagName = select.replace(/(\.|\#|\:)[a-z0-9_-]+/i, ”);var classReg = classname? new RegExp(‘\\b’ + classname[1] + ‘\\b’):false;for(var i=0; i<elements.length; i++) {result = tagName? elements[i].all.tags(tagName):elements[i].all;for(var j=0; j<result.length; j++) {node = result[j];if(classReg && !classReg.test(node.className)) continue;nodes[nodes.length] = node;}}return nodes;}</script>---------------------------------------------------此行不复制----------------------------------------------2.使用css导入iehoverfix.htc文件:

<style type="text/css">

body{
behavior:url(ie6hover.htc);
}

</style>

 

3.刷新一下页面,看看效果吧。li:hover 什么的全部都解决啦

目录
相关文章
|
7月前
|
Web App开发 前端开发 容器
CSS进阶: 选择器进阶、背景相关属性、元素显示模式、CSS特性
CSS进阶: 选择器进阶、背景相关属性、元素显示模式、CSS特性
104 1
|
5月前
|
容器
粉丝提问篇之css3的多列布局与p标签结合出现的样式
粉丝提问篇之css3的多列布局与p标签结合出现的样式
27 0
|
5月前
|
前端开发
CSS 支持伪类和伪元素,可用于指定文档中不同状态的样式。具体案例解析
CSS 支持伪类和伪元素,可用于指定文档中不同状态的样式。具体案例解析
28 2
|
9月前
|
前端开发 数据可视化
漏刻有时数据大屏CSS样式表成长教程(1)CSS绝对定位时水平居中的写法
漏刻有时数据大屏CSS样式表成长教程(1)CSS绝对定位时水平居中的写法
46 0
|
12月前
|
前端开发
CSS实战笔记(八) 元素隐藏
CSS实战笔记(八) 元素隐藏
65 0
|
12月前
|
前端开发
web前端-css中最直观的反馈-伪类及伪元素选择器的使用
web前端-css中最直观的反馈-伪类及伪元素选择器的使用
73 0
Less混合结合:nth-child()选择器的高级玩法
Less混合结合:nth-child()选择器的高级玩法
268 0
Less混合结合:nth-child()选择器的高级玩法
|
前端开发 开发者 容器
导航条-选择器覆盖 |学习笔记
快速学习 导航条-选择器覆盖
38 0
|
前端开发
|
前端开发
web前端学习(二十六)——CSS3组合选择符、伪类伪元素的相关设置
web前端学习(二十六)——CSS3组合选择符、伪类伪元素的相关设置
web前端学习(二十六)——CSS3组合选择符、伪类伪元素的相关设置