IE中偽類 hover的使用及BUG

:hover 是我們在 css 設計中最常運用的偽類之一，許多絢麗效果的實現離不開偽類 :hover，比如我們常見的純 css 選單、相簿效果等等。

或許用了這麼久的偽類 :hover，還有部分朋友還不完全了解 hover 的規則：

在 css1 中此偽類僅可用於 a 物件。且對於無 href 屬性（特性）的 a 物件，此偽類不發生作用。

在 css2 中此偽類可以應用於任何物件。

當我們用偽類 :hover 做某些特殊效果時，依據 css2 很好完成，但為了現在佔據主流瀏覽器的 ie6 ，我們又不得不做很多任務作，比如給新增a元素等來模擬完成最終的效果。

或許這樣講太空洞，請看下面乙個常見的觸發顯示的例子（僅選擇ie6為例講解）。

我們先用 css2 的寫法來實現：

xhtml部分：

css部分：

* 

ul li 
li a 
li:hover a

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

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

xhtml部分：

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

css部分：

* 

ul li 
li a 
li span 
li a:hover span

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

那到底是什麼問題呢？

不是標準說明的錯，也不是 ie 瀏覽器不支援 css1，而是 ie 瀏覽器自身解析的問題，是 ie5.5 和 ie6 中偽類:hover 的 bug。

那又該如何解決這個問題呢？

這個 bug 可以通過在鏈結的屬性中增加某些特殊的 css 屬性宣告來消除。

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

對 css **我們增加：

li a

:hover 
{}

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

說明：

對於 dispaly 不可以用本例來測試，可另外寫個更簡單的例子（去除 ul/li，a和span中的position ）。在實際應用中懌飛不建議改變 display 值來做為特定屬性消除此 bug，而且在某些例子中此屬性不一定能消除 bug。

對於做為特定屬性的 border 和 background 中的顏色我們還可用全寫和簡寫來改變，如 #fff 和 #ffffff 在消除 bug 中解析為 2 個不同的值。

ie中偽類 hover的使用及bug

hover是我們在css設計中最常運用的偽類之一，許多絢麗效果的實現離不開偽類 hover，比如我們常見的純css選單 相簿效果等等。或許用了這麼久的偽類 hover，還有部分朋友還不完全了解hover的規則 quote 在css1中此偽類僅可用於a物件。且對於無href屬性 特性 的a物件，此偽類...

IE中偽類hover的使用 BUG及解決方法

偽類 hover的規則 在css1中，此偽類僅可用於a物件。且對於無href屬性的a物件，此偽類不發生作用 在css2中，此偽類可以應用於任何物件 目前ie5.5 ie6僅支援css1中的 hover，不過新出的ie7以及firefox支援css2中的 hover。先用css2的寫法來實現 如不能顯...

IE6中偽類 hover的使用及BUG

以前未曾遇到類似的問題，一番google，才知道這是ie6處理css偽類 hover的bug。例如如下的 網 淘你喜歡 在ie7 ff中，滑鼠移動到鏈結上時，淘你喜歡 字樣會變為紅色，但ie6則無反應。所以ie6的bug就是如果a 與 a hover 的css定義是一樣的，也就是說如果a hover...