<style type="text/css"><!--li { display: block; padding: 0; margin: 1px 0 0; list-style: none; width:150px; text-align:center; background-color:#FFCC33; }li a:link,li a:visited{ display:block; color:#000000; padding:2px 5px; height:1%;}li a:hover{ font-weight:bold;}li ul{ position:absolute; visibility:hidden; left:100px; top:0px;}li li { background-color:#FF6600;}li li ul{ position:absolute; visibility:hidden;}li li li { background-color:#3399FF;}li:hover ul{ visibility:visible;}li:hover ul ul{ visibility:hidden;}li:hover{ background-color:#666666; position:relative;}li li:hover ul{ visibility:visible;}--></style> <ul> <li><a href="">menu item</a></li> <li><a href="">menu item</a></li> <li><a href="">menu item</a> <ul> <li><a href="">1stsubmenu item</a></li> <li><a href="">1stsubmenu item</a></li> <li><a href="">1stsubmenu item</a> <ul> <li><a href="">2ndsubmenu item</a></li> <li><a href="">2ndsubmenu item</a></li> <li><a href="">2ndsubmenu item</a></li> <li><a href="">2ndsubmenu item</a></li> <li><a href="">2ndsubmenu item</a></li> </ul> </li> <li><a href="">1stsubmenu item</a></li> <li><a href="">1stsubmenu item</a></li> </ul> </li> <li><a href="">menu item</a></li> <li><a href="">menu item</a></li> </ul> 如上圖，在制作數碼熱銷(xiāo)排行的頁(yè)面時(shí)，每種手機的圖片都是固定的160×120大小，但是出于頁(yè)面美觀(guān)及內容可讀性的考慮，在列表頁(yè)上圖片都壓縮為原大小的50%顯示；也就是80×60像素大小。不過(guò)當用戶(hù)將鼠標移動(dòng)到縮略圖上時(shí)，我們會(huì )按原圖大小顯示出來(lái)。類(lèi)似的效果在抓蝦上也被應用在顯示用戶(hù)頭像上：
抓蝦使用的技術(shù)是利用一個(gè)隱藏的浮動(dòng)層，每張縮略圖上注冊mouseover事件，當鼠標移動(dòng)到縮略圖上時(shí)，設置浮動(dòng)層中img元素的src屬性為頭像的圖片URL，然后通過(guò)JavaScript計算絕對定位，將放大后的頭像顯示在縮略圖上。
事實(shí)上，如果圖片顯示的大小已經(jīng)固定的話(huà)，不需要JavaScript，只需要純CSS就可以實(shí)現類(lèi)似的效果。如在數碼產(chǎn)品熱銷(xiāo)排行頁(yè)中，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;
}
原理很簡(jiǎn)單，設置a元素的position屬性為relative，圖片最開(kāi)始顯示為50%大小，使用默認定位；當:hover被觸發(fā)的時(shí)候，圖片更改為絕對定位，同時(shí)顯示為原圖大小，為了使效果看起來(lái)像是對稱(chēng)的蓋在縮略圖上，同時(shí)設置top和left為縮略圖的寬高的一半的負數。
以上CSS中比較讓人費解的大概就是粗斜顯示的 border:none 一句。這看似一個(gè)毫無(wú)意義的效果，可是如果沒(méi)有這一句的話(huà)，在IE6中就無(wú)法觸發(fā)hover。
以前未曾遇到類(lèi)似的問(wèn)題，一番google，才知道這是IE6處理CSS偽類(lèi):hover的Bug。例如如下的代碼：
<style>
a {}
a span {color: green;}
a:hover {}
a:hover span {color: red; }
</style>
<a href=”http://www.taobao.com“> 淘寶網(wǎng) <span> 淘你喜歡 </span></a>
在IE7/FF中，鼠標移動(dòng)到鏈接上時(shí)，”淘你喜歡”字樣會(huì )變?yōu)榧t色，但IE6則無(wú)反應。所以IE6的bug就是如果a 與 a:hover 的css定義是一樣的，也就是說(shuō)如果a:hover 中沒(méi)有樣式的改變，hover就不會(huì )被觸發(fā)。但如果在a:hover{}增加一些特定的屬性，例如
a:hover{border:none;}
或者
a:hover{padding:0;}
又或者
a:hover{background: none;}
此時(shí)hover就可以觸發(fā)了。這樣的屬性還包括direction/text-align/text-indent/float/overflow/position …… 等等。我在數碼產(chǎn)品暢銷(xiāo)榜頁(yè)面就是選擇了使用border:none。更詳細的信息請參考：
另外，通過(guò)閱讀 position:relative/absolute無(wú)法沖破的等級，發(fā)現CSS還有改進(jìn)的空間，改動(dòng)后如下：
.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;
}
改動(dòng)的原理就是去掉了a樣式定義，直接定義a:hover。這樣即避免了IE6的hover的Bug(position也是一個(gè)觸發(fā)顯示的屬性)，另外也避免了 position:relative/absolute無(wú)法沖破的等級 一文中提到的z-index的問(wèn)題，所以你會(huì )發(fā)現改進(jìn)后的樣式中，z-index屬性也去掉了。
聯(lián)系客服
