ie6下hover改变背景颜色

原创于 2009-08-08 17:24:00 发布 · 877 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ie #function #firefox #class #html #css

问题总结专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一种解决IE6浏览器中hover状态更改背景颜色问题的方法。通过使用JavaScript和CSS结合的方式，在不影响Firefox和IE7等其他浏览器的前提下，实现了鼠标悬停时元素背景颜色的变化效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天在处理hover改变背景颜色的时候，发现firefox和ie7都可以正常显示，但是ie6下就没能实现效果，通过查找发现以下这个方法还是比较简单实用的，特此记录下免得日后忘记了，也希望能帮到有需要的人。

在JS中：
<script type="text/javascript">
function fnOver(thisId){
    var thisClass = thisId.className;
    var overCssF = thisClass;
    if(thisClass.length>0){thisClass = thisClass+" "};
    thisId.className = thisClass + overCssF+"hover";
}
function fnOut(thisId){
    var thisClass = thisId.className;
    var thisNon = (thisId.className.length-5)/2;
    thisId.className=thisClass.substring(0, thisNon);
}
</script>

在CSS中：
.black{ background:#000;}
.blackhover{ background:#ccc}

在HTML中：
<ul>
<li class="black" onmouseover="fnOver(this)" onmouseout="fnOut(this)">sdfsfdsdfsfd</li>
<li class="black" onmouseover="fnOver(this)" onmouseout="fnOut(this)">sdfsfdsdfsfd</li>
</ul>