ie6_html/css_WEB-ITnose の div:hover の非互換性問題を解決する方法

像淘宝网www.taobao.com中分类有服饰、数码、护肤等，当鼠标移上去，div边框显示橙色的效果怎么弄出来的，div：hover在ff、ie7、ie8中都能实现，唯独ie6不能兼容div：hover，该怎样解决这个问题使得效果和淘宝网的这个一样在ie6中也可以实现该效果
 

回复讨论(解决方案)

<!--[if lte IE 6]><script type="text/javascript" language="Javascript" src="hover.js"></script><![endif]-->

/* 这个是普通样式，定义给需要效果的元素 */.hovereffect {border:1px solid blue;}/* 这个是hover样式 */.hovereffect:hover,.lay-on {background: #eee;border:1px solid red;}

<div class="hovereffect">div的hover</div><p class="hovereffect">p的hover</p>

ie6是css1.0，不支持非a的hover伪类，若想实现hover效果需要写js

将下面代码 写入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>

页面中添加引用

 body        {            /*        	首先不支持绝对路径，只支持相对路径。        	其次，是相对于当前ASPX网页的相对路径，和CSS文件的位置无关。             */            behavior: url(../css/hover.htc); /*可在IE6,7中对非<a>元素使用hover等伪类*/        }

可以用table模拟

也可以用jquery写：

<div class="test"></div>

<script type="text/javascript">$document.ready(function(){    $('.test').mouseover(function(){        $('.test').css({boder:orange 1px solid});    });    $('.test').mouseout(function(){        $('.test').css({boder:blue 1px solid});    });});</script>

自己测试了下，上楼的写法好像有点问题啊
<script> <br /> $(document).ready(function(){ <br /> $('.test').mouseover(function(){ <br /> $('.test').css({"boder":"orange 1px solid"}); <br /> }); <br /> $('.test').mouseout(function(){ <br /> $('.test').css({"boder":"blue 1px solid"}); <br /> }); <br /> }); <br /> </script>

2楼可以！谢谢。

感谢2楼的同学，我困惑了很久的问题得到解决
再次谢谢你，谢谢网络。

2楼  hover.js   里面怎么写的？？

没必要搞得这么复杂，
div:hover{zoom:1;XXX你的样式} 
div:hover .xxxclass{XXX你的样式}

对了    ie6 相对css是1.0，只对a标签有hover有用，非a标签没用，但是css2.0中，基本所有的都可以。

我也遇到这个问题了啊~~不过重新引入一个文件来解决好麻烦啊~~希望有更简单的办法

用是会用了，就是写着就傻眼了