IE中偽類hover怎么使用?具體使用方法分享
偽類:hover的規則:
在CSS1中,此偽類僅可用于a對象 。且對于無href屬性的a對象,此偽類不發生作用;
在CSS2中,此偽類可以應用于任何對象;
目前IE5.5、IE6僅支持CSS1中的:hover,不過新出的IE7以及Firefox支持CSS2中的:hover 。
先用CSS2的寫法來實現:

【IE中偽類hover怎么使用?具體使用方法分享】大家可以測試發現在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實現):

