本文和大家重點討論一下CSS僞類:hover在IE中使用及其BUG，僞類:hover是我們在CSS設計中最常運用的僞類之一，許多絢麗效果的實現離不開僞類:hover，比如我們常見的純CSS菜單、相冊效果等等。
CSS僞類:hover 在IE中使用及其BUG
僞類: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部分：
ExampleSourceCode
- <ul>
- <li>鼠標移過來觸發我吧！<ahrefahref="#"title="">
- 哈哈，終於被你發現了！</a></li>
- </ul>
CSS部分：
ExampleSourceCode
- *{margin:0;padding:0;}
- ul{list-style:none;margin:100px;}
- li{height:100px;width:100px;background:#000;
- font-size:12px;color:#fff;position:relative;}
- lia{display:none;}
- li:hovera{display:block;
- text-decoration:none;width:100px;height:100px;
- background:#c00;position:absolute;top:50px;
- left:50px;color:#fff;}
◆查看效果：
SourceCodetoRun
- <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"
- "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml">
- <head>
- <metahttp-equivmetahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
- <title>css</title>
- <styletypestyletype="text/css">
- ul{list-style:none;}
- li{height:100px;width:100px;background:#000;
- font-size:12px;color:#fff;position:relative;}
- lia{display:none;}
- li:hovera{display:block;text-decoration:none;width:100px;height:100px;background:#c00;
- position:absolute;top:50px;left:50px;color:#fff;}
- </style>
- </head>
- <body>
- <h2>使用CSS2做出的效果</h2>
- <ul>
- <li>鼠標移過來觸發我吧！<ahrefahref="#"title="">哈哈，終於被你發現了！</a></li>
- </ul>
- </body>
- </html>
[可先修改部分代碼再運行查看效果]
◆大家可以測試發現在FF等對CSS2支持很好的瀏覽器中，可以顯示我們所要達到的效果，但在IE6中卻無法實現。
下面讓我們換一種思維，所用CSS1的寫法來看看，這個時候由於無法支持li元素:hover的使用，我們只好把所有文字包含到a中，對a使用:hover，並且將要顯示隱藏的部分放到span元素中，首先我們對XHTML進行部分調整，調整如下：
XHTML部分：
ExampleSourceCode
- <ul>
- <li><ahrefahref="#"title="">鼠標移過來觸發我吧！<span>哈哈，終於被你發現</span></a></li>
- </ul>
CSS中我們將a的設置成塊級元素，並使a的大小和寬度和li的相同，並設置a爲相對位置，用a來模擬上例中的li；而用span來模擬上例中的a，設置span在默認情況下隱藏（display:none;），當a被觸發時（:hover），則span顯示（display:block;）
CSS部分：
ExampleSourceCode
- *{margin:0;padding:0;}
- ul{list-style:none;margin:100px;}
- li{height:100px;width:100px;background:#000;font-size:12px;}
- lia{display:block;height:100px;width:100px;
- position:relative;color:#fff;text-decoration:none;}
- lispan{display:none;}
- lia:hoverspan{display:block;width:100px;height:100px;
- background:#c00;position:absolute;top:50px;left:50px;color:#fff;}
◆查看效果：
SourceCodetoRun
- <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"
- "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml">
- <head>
- <metahttp-equivmetahttp-equiv="Content-Type"
- content="text/html;charset=gb2312"/>
- <title>css</title>
- <styletypestyletype="text/css">
- ul{list-style:none;}
- li{height:100px;width:100px;background:#000;font-size:12px;}
- lia{display:block;height:100px;width:100px;position:relative;
- color:#fff;text-decoration:none;}
- lispan{display:none;}
- lia:hoverspan{display:block;width:100px;height:100px;background:#c00;
- position:absolute;top:50px;left:50px;color:#fff;}
- </style>
- </head>
- <body>
- <h2>使用CSS1做出的效果（有BUG）</h2>
- <ul>
- <li><ahrefahref="#"title="">鼠標移過來觸發我吧！
- <span>哈哈，終於被你發現</span></a></li>
- </ul>
- </body>
- </html>
[可先修改部分代碼再運行查看效果]
可我們發現上例中的效果，在IE6中依然無法顯示，難道我們的代碼寫錯了，可檢查來檢查去一點錯誤也沒有（不信你找個高高手問問，他們依然會回答你，這代碼完全正確），難道是標準中的說明是錯的？還是IE6瀏覽器連CSS1也不支持？
那到底是什麼問題呢？
不是標準說明的錯，也不是IE瀏覽器不支持CSS1，而是IE瀏覽器自身解析的問題，是IE5.5和IE6中僞類:hover的BUG。
那又該如何解決這個問題呢？
◆這個BUG可以通過在鏈接的屬性中增加某些特殊的CSS屬性聲明來消除。下面我們對上面的第二個例子進行實驗，究竟哪些屬性可以幫我們來消除這些BUG。
對CSS代碼我們增加：
- lia:hover{}
對其屬性我們僅設定width:100px;發現在IE6中依舊沒有變化，我們嘗試着更改width的value，比如使其width:99px，奇怪的事情發生了，在IE6中，隱藏的部分在觸發的時候顯示出來了。我們再對lia: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不能觸發顯示（對於不能觸發顯示的部分，可以還有某些遺漏的屬性，歡迎朋友補充）外，其他屬性均可以做爲消除僞類:hoverBUG的特定屬性。
說明：
1、對於dispaly不可以用本例來測試，可另外寫個更簡單的例子（去除ul/li，a和span中的position）。在實際應用中懌飛不建議改變display值來做爲特定屬性消除此BUG，而且在某些例子中此屬性不一定能消除BUG。
2、對於做爲特定屬性的border和background中的顏色我們還可用全寫和簡寫來改變，如#fff和#ffffff在消除BUG中解析爲2個不同的值。
◆最終效果：
SourceCodetoRun
- <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"
- "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml">
- <head>
- <metahttp-equivmetahttp-equiv="Content-Type"
- content="text/html;charset=gb2312"/>
- <title>css</title>
- <styletypestyletype="text/css">
- ul{list-style:none;}
- li{height:100px;width:100px;background:#000;font-size:12px;}
- lia{display:block;height:100px;width:100px;
- position:relative;color:#fff;text-decoration:none;}
- lia:hover{background:#ccc;}
- lispan{display:none;}
- lia:hoverspan{display:block;width:100px;height:100px;
- background:#c00;position:absolute;top:50px;left:50px;color:#fff;}
- </style>
- </head>
- <body>
- <h2>使用CSS1做出的效果（無BUG）</h2>
- <ul>
- <li><ahrefahref="#"title="">鼠標移過來觸發我吧！
- <span>哈哈，終於被你發現</span></a></li>
- </ul>
- </body>
- </html>