原文作者：Blank 懌飛
　　偽類:hover是我們在CSS設計中最常運用的偽類之一，許多絢麗效果的實現(xiàn)離不開偽類:hover，比如我們常見的純CSS菜單、相冊效果等等。
　　或許用了這么久的偽類:hover，還有部分朋友還不完全了解hover的規(guī)則：


　　但目前IE5.5、IE6僅支持CSS1中的:hover，不過新出的IE7是支持CSS2中的:hover。
　　當我們用偽類:hover做某些非凡效果時，依據(jù)CSS2很好完成，但為了現(xiàn)在占據(jù)主流瀏覽器的IE6，我們又不得不做很多工作，比如給添加a元素等來模擬完成最終的效果。
　　或許這樣講太空洞，請看下面一個常見的觸發(fā)顯示的例子（僅選擇IE6為例講解）。
　　我們先用CSS2的寫法來實現(xiàn)：

XHTML部分：


CSS部分：


查看效果：


　　大家可以測試發(fā)現(xiàn)在FF等對CSS2支持很好的瀏覽器中，可以顯示我們所要達到的效果，但在IE6中卻無法實現(xiàn)。
　　下面讓我們換一種思維，所用CSS1的寫法來看看，這個時候由于無法支持li元素:hover的使用，我們只好把所有文字包含到a中，對a使用:hover，并且將要顯示隱藏的部分放到span元素中，首先我們對XHTML進行部分調(diào)整，調(diào)整如下：

XHTML部分：


　　CSS中我們將a的設置成塊級元素，并使a的大小和寬度和li的相同，并設置a為相對位置，用a來模擬上例中的li；而用span來模擬上例中的a，設置span在默認情況下隱藏（display:none;），當a被觸發(fā)時（:hover），則span顯示（display:block;）

CSS部分：


查看效果：


　　可我們發(fā)現(xiàn)上例中的效果，在IE6中依然無法顯示，難道我們的代碼寫錯了，可檢查來檢查去一點錯誤也沒有（不信你找個高高手問問，他們依然會回答你，這代碼完全正確），難道是標準中的說明是錯的？還是IE6瀏覽器連CSS1也不支持？很多疑問從四面八方跑來了……

　　那到底是什么問題呢？
　　不是標準說明的錯，也不是IE瀏覽器不支持CSS1，而是IE瀏覽器自身解析的問題，是IE5.5和IE6中偽類:hover的BUG。

　　那又該如何解決這個問題呢？
　　這個BUG可以通過在鏈接的屬性中增加某些非凡的CSS屬性聲明來消除。
　　下面我們對上面的第二個例子進行實驗，究竟哪些屬性可以幫我們來消除這些BUG。
　　對CSS代碼我們增加：


　　對其屬性我們僅設定width:100px;發(fā)現(xiàn)在IE6中依舊沒有變化，我們嘗試著更改width的value，比如使其width:99px，希奇的事情發(fā)生了，在IE6中，隱藏的部分在觸發(fā)的時候顯示出來了。我們再對li a:hover的屬性僅設定color來測試（初始值為#fff），更改color值，發(fā)現(xiàn)在IE6下卻也不能觸發(fā)顯示，希奇，希奇，真希奇……是不是依舊是一頭霧水……沒關系，繼續(xù)往下實驗，或許歸類了我們就能發(fā)現(xiàn)規(guī)律了！

　　我們再用其他屬性進行設置：width，positon，background，text-decoration，font-size，font-weight，font-family，border，float，display，font-style，margin，padding，text-align，overflow，text-transform，text-indent，z-index，vertical-align。

　　我們發(fā)現(xiàn)除了text-decoration，color，z-index不能觸發(fā)顯示（對于不能觸發(fā)顯示的部分，可以還有某些遺漏的屬性，歡迎朋友補充）外，其他屬性均可以做為消除偽類:hover BUG的特定屬性。

說明：
　　1、對于dispaly不可以用本例來測試，可另外寫個更簡單的例子（去除ul/li，a和span中的position）。在實際應用中懌飛不建議改變display值來做為特定屬性消除此BUG，而且在某些例子中此屬性不一定能消除BUG。
　　2、對于做為特定屬性的border和background中的顏色我們還可用全寫和簡寫來改變，如#fff和#ffffff在消除BUG中解析為2個不同的值。

最終效果：