style type="text/css"

  
menu item

  
menu item

  
menu item

    
1stsubmenu item

    
1stsubmenu item

    
1stsubmenu item

      
2ndsubmenu item

      
2ndsubmenu item

      
2ndsubmenu item

      
2ndsubmenu item

      
2ndsubmenu item

    
1stsubmenu item

    
1stsubmenu item

  
menu item

  
menu item

如上图，在制作数码热销排行的页面时，每种手机的图片都是固定的160×120大小，但是出于页面美观及内容可读性的考虑，在列表页上图片都压缩为原大小的50%显示；也就是80×60像素大小。不过当用户将鼠标移动到缩略图上时，我们会按原图大小显示出来。类似的效果在抓虾上也被应用在显示用户头像上：

抓虾使用的技术是利用一个隐藏的浮动层，每张缩略图上注册mouseover事件，当鼠标移动到缩略图上时，设置浮动层中img元素的src属性为头像的图片URL，然后通过JavaScript计算绝对定位，将放大后的头像显示在缩略图上。

事实上，如果图片显示的大小已经固定的话，不需要JavaScript，只需要纯CSS就可以实现类似的效果。如在数码产品热销排行页中，CSS的定义大致如下：

.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。例如如下的代码：

淘宝网 淘你喜欢

在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 …… 等等。我在数码产品畅销榜页面就是选择了使用border:none。更详细的信息请参考：

• IE Pure CSS Pop Ups Bug
• IE中伪类:hover的使用及BUG

另外，通过阅读 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属性也去掉了。