: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;

}
 

大家可以測試發現在 Firefox 等對 CSS2 支援很好的瀏覽器中，可以顯示我們所要達到的效果，但在 IE6 中卻無法實現。

下面讓我們換一種思維，所用 CSS1 的寫法來看看，這個時候由於無法支援 li 元素 :hover 的使用，我們只好把所有文字包含到 a 中，對 a 使用 :hover ，並且將要顯示隱藏的部分放到 span 元素中，首先我們對 XHTML 進行部分調整，調整如下：

XHTML部分：

<ul>

	<li><a href="#" title="">滑鼠移過來觸發我吧！<span>哈哈，終於被你發現</span></a></li>


</ul>
 

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

CSS部分：

* {

	margin:0;

	padding:0;

}

ul {

	list-style:none;

	margin:100px;

}

li {

	height:100px;

	width:100px;

	background:#000;

	font-size:12px;

}

li a {

	display:block;

	height:100px;

	width:100px;

	position:relative;

	color:#fff;

	text-decoration:none;

}

li span {

	display:none;

}

li a:hover span {

	display:block;

	width:100px;

	height:100px;

	background:#c00;

	position:absolute;

	top:50px;

	left:50px;

	color:#fff;

}

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

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

那又該如何解決這個問題呢？
這個 BUG 可以通過在連結的屬性中增加某些特殊的 CSS 屬性宣告來消除。

下面我們對上面的第二個例子進行實驗，究竟哪些屬性可以幫我們來消除這些 BUG。

對 CSS 程式碼我們增加：

li a:hover {}

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

我們再用其他屬性進行設定：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。

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

說明：

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