IE中偽類hover的使用及BUG

2024-07-11 08:45:45

字體：大中小

來源：轉載

供稿：網友

偽類:hover的規則：
在CSS1中，此偽類僅可用于a對象。且對于無href屬性的a對象，此偽類不發生作用；
在CSS2中，此偽類可以應用于任何對象；
目前IE5.5、IE6僅支持CSS1中的:hover，不過新出的IE7以及Firefox支持CSS2中的:hover。
先用CSS2的寫法來實現：

提示：您可以先修改部分代碼再運行

大家可以測試發現在Firefox等對CSS2支持很好的瀏覽器中，可以顯示我們所要達到的效果，但在IE6中卻無法實現。
下面讓我們換一種思維，使用CSS1的寫法來看看：
在CSS1中，由于無法支持li元素:hover的使用，所以把文字包含到a中，對a使用:hover，并且將要顯示隱藏的部分放到span元素中；
CSS中我們將a的設置成塊級元素，并使a的大小和寬度和li的相同；
并設置a為相對位置，用a來模擬上例中的li；
而用span來模擬上例中的a，設置span在默認情況下隱藏（display:none;）；
當a被觸發時（:hover），則span顯示（display:block;）；
但，如果按照以上方式修改后，示例的效果，在IE6中依然無法顯示。
原因是：IE瀏覽器自身解析的問題，是IE5.5和IE6中偽類:hover的BUG。
如何解決這個問題呢？
這個BUG可以通過在鏈接的屬性中增加某些特殊的CSS屬性聲明來消除。
li a:hover {}
對其屬性我們僅設定width:100px;發現在IE6中依舊沒有變化，我們嘗試著更改width的value，比如使其width:99px，奇怪的事情發生了，在IE6中，隱藏的部分在觸發的時候顯示出來了。我們再對li a:hover的屬性僅設定color來測試（初始值為#fff），更改color值，發現在IE6下卻也不能觸發顯示。。。
最后總結發現，除了text-decoration，color，z-index不能觸發顯示（對于不能觸發顯示的部分，可以還有某些遺漏的屬性）外，其他屬性均可以做為消除偽類:hover BUG的特定屬性。
說明：
1、不建議改變display值來做為特定屬性消除此BUG，而且在某些例子中此屬性不一定能消除BUG。
2、對于做為特定屬性的border和background中的顏色我們還可用全寫和簡寫來改變，如#fff和#ffffff在消除BUG中解析為2個不同的值。
CSS1的寫法最終效果：

提示：您可以先修改部分代碼再運行

最少代碼實現版(xugang實現)：

提示：您可以先修改部分代碼再運行

上一篇：純CSS無hacks的跨游覽器自適應高度多列布局推薦

下一篇：img與容器下邊界的空隙（縫隙）的解決方法