解决ie6 css:hover 背景色不改变的方案

最新推荐文章于 2024-08-12 15:00:00 发布

转载最新推荐文章于 2024-08-12 15:00:00 发布 · 1.8k 阅读

文章标签：

#css #ie #function #javascript #behavior #table

本文介绍了在IE6浏览器中解决CSS:hover伪类不被支持的问题，提供了三种方法：使用JavaScript事件、CSS表达式及CSS behavior行为。通过这些方法可以有效实现:hover效果。

IE6 的 CSS:hover 伪类

众所周知，IE6 不支持 a:hover 以外的 CSS 伪类，解决办法一般有 3 种方案：

使用 JavaScript 事件

直接使用 JavaScript 的 onmouseover/onmouseenter 和 onmouseout/onmouseleave事件进行针对性开发，这大概没什么好详细介绍的。

使用 CSS 表达式

辅以 CSS 表达式中 JScript 同样也有 onmouseover/onmouseenter 和onmouseout/onmouseleave 事件，用以实现 :hover 效果。
注意：其中冒号之前的事件名称可以随意，关键是 expression() 里面的事件。

ul li{
    onmouseout:expression(οnmοuseοut=function(){this.style.backgroundColor=''});
    onmouseover:expression(οnmοuseοver=function(){this.style.backgroundColor='yellow'});
}
ol li{
    onmouseleave:expression(οnmοuseleave=function(){this.style.backgroundColor=''});
    onmouseenter:expression(οnmοuseenter=function(){this.style.backgroundColor='yellow'});
}

不过应该说使用 CSS class 是更好的实践。

table tr{
    onmouseout:expression(οnmοuseοut=function(){try{this.className=this.className.replace(' hover','')}catch(ex){}});
    onmouseover:expression(οnmοuseοver=function(){this.className+=' hover'});
}
table tr.hover td{background:yellow;}

onmouseout 事件处理函数中加了 try/catch 是为了避免 IE5.5 因为不支持 replace()而报脚本错误。当然为了避免这个错误，还是其他的实现方式：

table tr{
    onmouseenter:expression(οnmοuseοut=function(){
        var c=this.className, h=' hover', l=h.length;
        var s=c.indexOf(h);
        this.className=c.substring(0,s)+c.substr(s+l);
    });
    onmouseleave:expression(οnmοuseοver=function(){this.className+=' hover'});
}
table tr.hover td{background:yellow;}

使用 CSS behavior 行为

使用 Whatever:hover

csshover3.htc

<!--[if lte IE 6]>
<style type="text/css">
body{behavior:url("csshover3.htc"); }
</style>
<![endif]-->

延伸阅读

blog:datetime=2010/09/15 19:20:02:tags=IE6,CSS