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

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 什么的全部都解决啦