IE中伪类:hover的使用及BUG，以及如何在IE6中进行修正（CSS）

本文链接：https://blog.youkuaiyun.com/subchen/article/details/1955231

本文介绍了CSS中:hover伪类的应用技巧及如何让旧版IE浏览器支持该特性。通过使用IE6的ExpressionCSS，可以让所有浏览器实现一致的:hover效果。

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

:hover是我们在CSS设计中最常运用的伪类之一，许多绚丽效果的实现离不开伪类:hover，比如我们常见的纯CSS菜单、相册效果等等。

或许用了这么久的伪类:hover，还有部分朋友还不完全了解hover的规则：

引用:
在CSS1中此伪类仅可用于a对象。且对于无href属性（特性）的a对象，此伪类不发生作用。
在CSS2中此伪类可以应用于任何对象。

但目前IE5.5、IE6仅支持CSS1中的:hover，不过新出的IE7是支持CSS2中的:hover。

这里有一个解决办法让IE和其他浏览器一起痛快地HOVER（利用IE6 的Expression CSS）：

span.link {
   cursor:pointer;
   color: blue;
   text-decoration: none;
   m: expression(this.onmouseover = new Function("this.className = 'link-hover';"));
}
span.link:hover, .link-hover {
   cursor:pointer;
   color: red;
   text-decoration: underline;
   m: expression(this.onmouseout = new Function("this.className = 'link';"));
}

<span class="link">this is a link</span>

也可以这么用
#m:expression(this.onmouseout=function(){this.className='link'});

其中"#"开头代表只有IE认识
注意 Firefox 不认识 .link:hover，必须前面加tag，才能认识，如 span.link:hover ，很奇怪

span.link {
    cursor:pointer;
    color:blue;
    text-decoration:none;
    #m:expression(this.onmouseover=function(){this.className='link-hover'});
}
span.link:hover, .link-hover {
    cursor:pointer;
    color:red;
    text-decoration:underline;
    #m:expression(this.onmouseout=function(){this.className='link'});
}