IE中偽類hover的使用及BUG
偽類:hover的規則：
在CSS1中，此偽類僅可用于a對象 。且對于無href屬性的a對象，此偽類不發生作用；
在CSS2中，此偽類可以應用于任何對象；
目前IE5.5、IE6僅支持CSS1中的:hover，不過新出的IE7以及Firefox支持CSS2中的:hover 。
先用CSS2的寫法來實現：
html head style * {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;} /style /head body ul li鼠標移過來觸發我吧！a title=""哈哈 ， 終于被你發現了！/a/li /ul /body /html
ffcod = delpost.runcode31 .value; ffcod = ffcod.replace(/
/g,’’); delpost.runcode31 .value = https://www.questions.com.cn/dnjc/ffcod; 提示：您可以先修改部分代碼再運行
大家可以測試發現在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的寫法最終效果：
html head style * {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 a:hover {background:#ccc;} li span {display:none; } li a:hover span {display:block; width:100px; height:100px; background:#c00; position:absolute; top:50px; left:50px; color:#fff; } /style /head body ul lia title=""鼠標移過來觸發我吧！span哈哈，終于被你發現/span/a/li /ul /body /html
ffcod = delpost.runcode32 .value; ffcod = ffcod.replace(/
/g,’’); delpost.runcode32 .value = https://www.questions.com.cn/dnjc/ffcod; 提示：您可以先修改部分代碼再運行
最少代碼實現版(xugang實現)：
html head style li {height:10px; width:120px; background:#000;} li a{height:10px; width:120px; display:block;} li a:hover {background:#ccc;} li span {display:none;} li a:hover span {display:block; width:100px; height:40px; background:#c00; position:absolute; top:15px; left:180px;} /style /head body ul li a title=""鼠標移過來觸發 span ul liaaa/li liaaa/li /ul /span /a /li /ul /body /html
ffcod = delpost.runcode33 .value; ffcod = ffcod.replace(/
/g,’’); delpost.runcode33 .value = https://www.questions.com.cn/dnjc/ffcod; 提示：您可以先修改部分代碼再運行
