CSS偽類:hover 在IE中使用及其BUG

原文作者：Blank 懌飛
　　偽類:hover是我們在CSS設計中最常運用的偽類之一，許多絢麗效果的實現離不開偽類:hover，比如我們常見的純CSS菜單、相簿效果等等。
　　或許用了這麼久的偽類:hover，還有部分朋友還不完全瞭解hover的規則：
在CSS1中此偽類僅可用於a對象。且對於無href屬性（特性）的a對象，此偽類不發生作用。
在CSS2中此偽類可以應用於任何對象。
　　但目前IE5.5、IE6僅支援CSS1中的:hover，不過新出的IE7是支援CSS2中的:hover。
　　當我們用偽類:hover做某些特殊效果時，依據CSS2很好完成，但為了現在佔據主流瀏覽器的IE6，我們又不得不做很多工作，比如給添加a元素等來類比完成最終的效果。
　　或許這樣講太空洞，請看下面一個常見的觸發顯示的例子（僅選擇IE6為例講解）。
　　我們先用CSS2的寫法來實現：
XHTML部分：

代碼如下	複製代碼
<ul>  <li>滑鼠移過來觸發我吧！<a href="#" title="">哈哈，終於被你發現了！</a></li>  </ul> CSS部分： * {margin:0; padding:0;}  ul {list-style:none;margin:100px;} li {height:100px; width:100px; background:#000; font-size:12px; color:#fff; position:relative;}  li a {display:none;}  li:hover a{display:block; text-decoration:none;width:100px; height:100px; background:#c00; position:absolute; top:50px; left:50px; color:#fff;}

css

代碼如下	複製代碼
ul {list-style:none;} li {height:100px; width:100px; background:#000; font-size:12px; color:#fff; position:relative;} li a {display:none;} li:hover a{display:block; text-decoration:none;width:100px; height:100px; background:#c00; position:absolute; top:50px; left:50px; color:#fff;}

使用CSS2做出的效果
滑鼠移過來觸發我吧！哈哈，終於被你發現了！

[ 可先修改部分代碼 再運行查看效果 ]
大家可以測試發現在FF等對CSS2支援很好的瀏覽器中，可以顯示我們所要達到的效果，但在IE6中卻無法實現。