IE6中hover的bug

这是一段数码产品的hover显示代码，当鼠标划过时，图片有被放大的视觉效果

.DigitalImage a { position: relative; } .DigitalImage a:hover { position: relative; z-index: 1; border: none; } .DigitalImage a img { position: static; width: 80px; height: 60px; border: none; } .DigitalImage a:hover img { position: absolute; z-index: 2; width: 160px; height: 120px; border: 1px solid #CCC; left: -40px; top: -30px; }

原理很简单，设置a元素的position属性为relative，图片最开始显示为50%大小，使用默认定位；当:hover被触发的时候，图片更改为绝对定位，同时显示为原图大小，为了使效果看起来像是对称的盖在缩略图上，同时设置top和left为缩略图的宽高的一半的负数。

以上CSS中比较让人费解的大概就是粗斜显示的 border:none 一句。这看似一个毫无意义的效果，可是如果没有这一句的话，在IE6中就无法触发hover。

以前未曾遇到类似的问题，一番google，才知道这是IE6处理CSS伪类:hover的Bug。例如如下的代码：

<style> a {} a span {color: green;} a:hover {} a:hover span {color: red; } </style> <a href=”http://www.taobao.com“> 淘宝网 <span> 淘你喜欢 </span></a>

在IE7/FF中，鼠标移动到链接上时，”淘你喜欢”字样会变为红色，但IE6则无反应。所以IE6的bug就是如果a 与 a:hover 的css定义是一样的，也就是说如果a:hover 中没有样式的改变，hover就不会被触发。但如果在a:hover{}增加一些特定的属性，例如

a:hover{border:none;} 或者 a:hover{padding:0;} 又或者 a:hover{background: none;}

此时hover就可以触发了。这样的属性还包括direction/text-align/text-indent/float/overflow/position …… 等等。

另外，通过阅读 position:relative/absolute无法冲破的等级，发现CSS还有改进的空间，改动后如下：

.DigitalImage a:hover { position: relative; } .DigitalImage a img { position: static; width: 80px; height: 60px; border: none; } .DigitalImage a:hover img { position: absolute; width: 160px; height: 120px; border: 1px solid #CCC; left: -40px; top: -30px; }

改动的原理就是去掉了a样式定义，直接定义a:hover。这样即避免了IE6的hover的Bug(position也是一个触发显示的属性)，另外也避免了 position:relative/absolute无法冲破的等级 一文中提到的z-index的问题，所以你会发现改进后的样式中，z-index属性也去掉了。