IE中僞類:hover的使用及BUG (1)

:hover是我們在CSS設計中最常運用的僞類之一，許多絢麗效果的實作離不開僞類:hover，比如我們常見的純CSS菜單、相冊效果等等。

或許用了這麼久的僞類:hover，還有部分朋友還不完全了解hover的規則：

引用:

在CSS1中此僞類僅可用于a對象。且對于無href屬性（特性）的a對象，此僞類不發生作用。

在CSS2中此僞類可以應用于任何對象。

但目前IE5.5、IE6僅支援CSS1中的:hover，不過新出的IE7是支援CSS2中的:hover。

當我們用僞類:hover做某些特殊效果時，依據CSS2很好完成，但為了現在占據主流浏覽器的IE6，我們又不得不做很多工作，比如給添加a元素等來模拟完成最終的效果。

或許這樣講太空洞，請看下面一個常見的觸發顯示的例子（僅選擇IE6為例講解）。

我們先用CSS2的寫法來實作：

XHTML部分：

<ul>

<li>滑鼠移過來觸發我吧！<a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" title="">哈哈，終于被你發現了！</a></li>

</ul>

CSS部分：

* {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;}

示範效果：

運作代碼框

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>IE中僞類:hover的使用及BUG</title>

<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>

</ul>

</body>

</html>

大家可以測試發現在FF等對CSS2支援很好的浏覽器中，可以顯示我們所要達到的效果，但在IE6中卻無法實作。

下面讓我們換一種思維，所用CSS1的寫法來看看，這個時候由于無法支援li元素:hover的使用，我們隻好把所有文字包含到a中，對a使用:hover，并且将要顯示隐藏的部分放到span元素中，首先我們對XHTML進行部分調整，調整如下：

XHTML部分：

<ul>

<li><a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" title="">滑鼠移過來觸發我吧！<span>哈哈，終于被你發現</span></a></li>

</ul>

CSS中我們将a的設定成塊級元素，并使a的大小和寬度和li的相同，并設定a為相對位置，用a來模拟上例中的li；而用span來模拟上例中的a，設定span在預設情況下隐藏（display:none;），當a被觸發時（:hover），則span顯示（display:block;）

CSS部分：

* {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 span {display:none; }

li a:hover span {display:block; width:100px; height:100px; background:#c00; position:absolute; top:50px; left:50px; color:#fff; }

運作代碼框

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>IE中僞類:hover的使用及BUG</title>

<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 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>

</ul>

</body>

</html> IE中僞類:hover的使用及BUG (2)

可我們發現上例中的效果，在IE6中依然無法顯示，難道我們的代碼寫錯了，可檢查來檢查去一點錯誤也沒有（不信你找個高高手問問，他們依然會回答你，這代碼完全正确），難道是标準中的說明是錯的？還是IE6浏覽器連CSS1也不支援？很多疑問從四面八方跑來了……

那到底是什麼問題呢？

不是标準說明的錯，也不是IE浏覽器不支援CSS1，而是IE浏覽器自身解析的問題，是IE5.5和IE6中僞類:hover的BUG。

那又該如何解決這個問題呢？

這個BUG可以通過在連結的屬性中增加某些特殊的CSS屬性聲明來消除。

下面我們對上面的第二個例子進行實驗，究竟哪些屬性可以幫我們來消除這些BUG。

對CSS代碼我們增加：

li a:hover {}

對其屬性我們僅設定width:100px;發現在IE6中依舊沒有變化，我們嘗試着更改width的value，比如使其width:99px，奇怪的事情發生了，在IE6中，隐藏的部分在觸發的時候顯示出來了。我們再對li a:hover的屬性僅設定color來測試（初始值為#fff），更改color值，發現在IE6下卻也不能觸發顯示，奇怪，奇怪，真奇怪……是不是依舊是一頭霧水……沒關系，繼續往下實驗，或許歸類了我們就能發現規律了！

我們再用其他屬性進行設定：width，positon，background，text-decoration，font-size，font-weight，font-family，border，float，display，font-style，margin，padding，text-align，overflow，text-transform，text-indent，z-index，vertical-align。

我們發現除了text-decoration，color，z-index不能觸發顯示（對于不能觸發顯示的部分，可以還有某些遺漏的屬性，歡迎朋友補充）外，其他屬性均可以做為消除僞類:hover BUG的特定屬性。

說明：

對于dispaly不可以用本例來測試，可另外寫個更簡單的例子（去除ul/li，a和span中的position）。在實際應用中怿飛不建議改變display值來做為特定屬性消除此BUG，而且在某些例子中此屬性不一定能消除BUG。

對于做為特定屬性的border和background中的顔色我們還可用全寫和簡寫來改變，如#fff和#ffffff在消除BUG中解析為2個不同的值。

最終效果：

運作代碼框

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>IE中僞類:hover的使用及BUG</title>

<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>

</ul>

</body>

</html>

IE中僞類:hover的使用及BUG (1)

繼續閱讀

（C# 程式設計指南）

ASP.NET中存取圖檔到資料庫的示例(C#)

兩種清除浮動的方法

一個小小的移動web版音樂播放器

Docker - Dockerfile之ADD、COPY、WORKDIR、USER、EXPOSE指令詳解

Compile workrave under windows &ndash; My exprience 在Windows上編譯Workrave

門戶通專訪草根站長九天狼：做站貴在堅持

如何成為一名.net 工程師?

tabpanel 使用問題

為什麼把CSS放頭部，script放下面

CSS之折疊菜單

web開發之前後端渲染

DOM下元素 offset client scroll 相關屬性簡介

IE8 CSS設定DIV居中，添加“margin:0 auto”

403 Forbidden，You don't have permission to access / on this server.Forbidden

無元件上傳圖檔到資料庫中，最完整解決方案