前端空间 发表于 2012-12-22 21:24:02

【javascript】csshover解决ie6下hover兼容问题

<div id="cnblogs_post_body">在 ie6 下只有 a 才支持 :hover 伪类,其它标签都不支持,很是让人头疼。不过,可以通过 csshover.htc 可以解决 ie6 的 hover 兼容问题。
它利用 javascript 脚本来给元素的的样式定义,如果检测到 hover 定义,就给元素设置 onmouseover 和 onmouseout 事件,以此来实现 hover 的效果。
附上 csshover.htc 代码:
<div class="cnblogs_code"><attach event="ondocumentready" handler="parseStylesheets"/><script language="JScript">var currentSheet, doc = window.document, activators = {    onhover:{on:'onmouseover', off:'onmouseout'},    onactive:{on:'onmousedown', off:'onmouseup'}};function parseStylesheets(){    var sheets = doc.styleSheets, l = sheets.length;    for(var i = 0; i < l; i++){       parseStylesheet(sheets);    };};function parseStylesheet(sheet){    if(sheet.imports){      try{            var imports = sheet.imports, l = imports.length;            for(var i = 0; i < l; i++){                parseStylesheet(sheet.imports);            };      }catch(securityException){};    };    try{      var rules = (currentSheet = sheet).rules, l = rules.length;      for(var j = 0; j < l; j++){            parseCSSRule(rules);      };    }catch(securityException){};};function parseCSSRule(rule){    var select = rule.selectorText, style = rule.style.cssText;    if(!(/(^|\s)(([^a]([^ ]+)?)|(a([^#.][^ ]+)+)):(hover|active)/i).test(select) || !style) return;    var pseudo = select.replace(/[^:]+:(+).*/i, 'on$1');    var newSelect = select.replace(/(\.(+):+)|(:+)/gi, '.$2' + pseudo);    var className = (/\.(*on(hover|active))/i).exec(newSelect)];    var affected = select.replace(/:hover.*$/, '');    var elements = getElementsBySelect(affected);    currentSheet.addRule(newSelect, style);    for(var i = 0; i < elements.length; i++){      new HoverElement(elements, className, activators);    };};function HoverElement(node, className, events){    if(!node.hovers) node.hovers = {};    if(node.hovers) return;    node.hovers = true;    node.attachEvent(events.on, function(){      node.className += ' ' + className;    });    node.attachEvent(events.off, function(){      node.className = node.className.replace(new RegExp('\\s+'+className, 'g'),'');    });};function getElementsBySelect(rule){    var parts, nodes = ;    parts = rule.split(' ');    for(var i = 0; i < parts.length; i++){      nodes = getSelectedNodes(parts, nodes);    };    return nodes;};function getSelectedNodes(select, elements){    var result, node, nodes = [];    var classname = (/\.(+)/i).exec(select);    var identify = (/\#(+)/i).exec(select);    var tagName = select.replace(/(\.|\#|\:)+/i, '');    for(var i = 0; i < elements.length; i++){      result = tagName ? elements.all.tags(tagName) : elements.all;         for(var j = 0; j < result.length; j++){            node = result;            if((identify && node.id != identify) || (classname && !(new RegExp('\\b' + classname + '\\b').exec(node.className)))) continue;            nodes = node;      };    };    return nodes;};</script>
页: [1]
查看完整版本: 【javascript】csshover解决ie6下hover兼容问题