首頁 >web前端 >css教學 >關於IE中偽類hover的使用及BUG

關於IE中偽類hover的使用及BUG

不言原創: 2018-06-21 17:40:561761瀏覽

這篇文章主要介紹了關於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

相關文章