這篇文章主要介紹了關於IE中偽類hover的使用及BUG，有著一定的參考價值，現在分享給大家，有需要的朋友可以參考一下
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 href="#" title="">哈哈，终于被你发现了！</a></li>
</ul>
</body>
</html>提示：您可以先修改部分程式碼再執行
大家可以測試發現在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>
<li><a href="#" title="">鼠标移过来触发我吧！<span>哈哈，终于被你发现</span></a></li>
</ul>
</body>
</html>#提示：您可以先修改部分程式碼再執行
最少程式碼實作版(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 href="#" title="">鼠标移过来触发
<span>
<ul>
<li>aaa</li>
<li>aaa</li>
</ul>
</span>
</a>
</li>
</ul>
</body>
</html>提示：您可以先修改部分程式碼再運行
以上就是本文的全部內容，希望對大家的學習有所幫助，更多相關內容請關注PHP中文網！
相關推薦：
##
以上是關於IE中偽類hover的使用及BUG的詳細內容。更多資訊請關注PHP中文網其他相關文章！
