如上圖，在制作數碼熱銷排行的頁面時，每種手機的圖片都是固定的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。例如如下的代碼：
<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 …… 等等。我在數碼產品暢銷榜頁面就是選擇了使用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屬性也去掉了。
