自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

IE中中CSS偽類:hover的使用及其BUG

作者：52css
開發(fā) 前端
偽類:hover是我們在CSS設(shè)計中最常運用的偽類之一，許多絢麗效果的實現(xiàn)離不開偽類:hover，這里向大家描述一下CSS偽類:hover 在IE中使用及其BUG。

本文和大家重點討論一下CSS偽類:hover 在IE中使用及其BUG，偽類:hover是我們在CSS設(shè)計中最常運用的偽類之一，許多絢麗效果的實現(xiàn)離不開偽類:hover，比如我們常見的純CSS菜單、相冊效果等等。

CSS偽類:hover 在IE中使用及其BUG

偽類:hover是我們在CSS設(shè)計中最常運用的偽類之一，許多絢麗效果的實現(xiàn)離不開偽類:hover，比如我們常見的純CSS菜單、相冊效果等等?；蛟S用了這么久的偽類:hover，還有部分朋友還不完全了解hover的規(guī)則：

◆在CSS1中此偽類僅可用于a對象。且對于無href屬性（特性）的a對象，此偽類不發(fā)生作用。

◆在CSS2中此偽類可以應(yīng)用于任何對象。

　　但目前IE5.5、IE6僅支持CSS1中的:hover，不過新出的IE7是支持CSS2中的:hover。
　　當(dāng)我們用偽類:hover做某些特殊效果時，依據(jù)CSS2很好完成，但為了現(xiàn)在占據(jù)主流瀏覽器的IE6，我們又不得不做很多工作，比如給添加a元素等來模擬完成最終的效果。

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

　　我們先用CSS2的寫法來實現(xiàn)：

XHTML部分：

ExampleSourceCode

  1. <ul> 
  2. <li>鼠標(biāo)移過來觸發(fā)我吧！<ahrefahref="#"title="">
  3. 哈哈，終于被你發(fā)現(xiàn)了！</a></li> 
  4. </ul> 
  5.  

 CSS部分：

ExampleSourceCode

  1. *{margin:0;padding:0;}  
  2. ul{list-style:none;margin:100px;}  
  3. li{height:100px;width:100px;background:#000;  
  4. font-size:12px;color:#fff;position:relative;}  
  5. lia{display:none;}  
  6. li:hovera{display:block;  
  7. text-decoration:none;width:100px;height:100px;  
  8. background:#c00;position:absolute;top:50px;
  9. left:50px;color:#fff;}  
  10.  

◆查看效果：

SourceCodetoRun

  1. <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"  
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  3. <htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml"> 
  4. <head> 
  5. <metahttp-equivmetahttp-equiv="Content-Type"content="text/html;charset=gb2312"/> 
  6. <title>css</title> 
  7. <styletypestyletype="text/css"> 
  8. ul{list-style:none;}  
  9. li{height:100px;width:100px;background:#000;  
  10. font-size:12px;color:#fff;position:relative;}  
  11. lia{display:none;}  
  12. li:hovera{display:block;text-decoration:none;width:100px;height:100px;background:#c00;  
  13. position:absolute;top:50px;left:50px;color:#fff;}  
  14. </style> 
  15. </head> 
  16. <body> 
  17. <h2>使用CSS2做出的效果</h2> 
  18. <ul> 
  19. <li>鼠標(biāo)移過來觸發(fā)我吧！<ahrefahref="#"title="">哈哈，終于被你發(fā)現(xiàn)了！</a></li> 
  20. </ul> 
  21. </body> 
  22. </html> 
  23.  

 [可先修改部分代碼再運行查看效果]#p#

    ◆大家可以測試發(fā)現(xiàn)在FF等對CSS2支持很好的瀏覽器中，可以顯示我們所要達(dá)到的效果，但在IE6中卻無法實現(xiàn)。

　　下面讓我們換一種思維，所用CSS1的寫法來看看，這個時候由于無法支持li元素:hover的使用，我們只好把所有文字包含到a中，對a使用:hover，并且將要顯示隱藏的部分放到span元素中，首先我們對XHTML進(jìn)行部分調(diào)整，調(diào)整如下：

XHTML部分：

ExampleSourceCode

  1. <ul> 
  2. <li><ahrefahref="#"title="">鼠標(biāo)移過來觸發(fā)我吧！<span>哈哈，終于被你發(fā)現(xiàn)</span></a></li> 
  3. </ul> 
  4.  

　　CSS中我們將a的設(shè)置成塊級元素，并使a的大小和寬度和li的相同，并設(shè)置a為相對位置，用a來模擬上例中的li；而用span來模擬上例中的a，設(shè)置span在默認(rèn)情況下隱藏（display:none;），當(dāng)a被觸發(fā)時（:hover），則span顯示（display:block;）

CSS部分：

ExampleSourceCode 

  1. *{margin:0;padding:0;}  
  2. ul{list-style:none;margin:100px;}  
  3. li{height:100px;width:100px;background:#000;font-size:12px;}  
  4. lia{display:block;height:100px;width:100px;  
  5. position:relative;color:#fff;text-decoration:none;}  
  6. lispan{display:none;}  
  7. lia:hoverspan{display:block;width:100px;height:100px;  
  8. background:#c00;position:absolute;top:50px;left:50px;color:#fff;}  

 ◆查看效果：

SourceCodetoRun 

  1. <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"  
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  3. <htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml"> 
  4. <head> 
  5. <metahttp-equivmetahttp-equiv="Content-Type"
  6. content="text/html;charset=gb2312"/> 
  7. <title>css</title> 
  8. <styletypestyletype="text/css"> 
  9. ul{list-style:none;}  
  10. li{height:100px;width:100px;background:#000;font-size:12px;}  
  11. lia{display:block;height:100px;width:100px;position:relative;  
  12. color:#fff;text-decoration:none;}  
  13. lispan{display:none;}  
  14. lia:hoverspan{display:block;width:100px;height:100px;background:#c00;  
  15. position:absolute;top:50px;left:50px;color:#fff;}  
  16. </style> 
  17. </head> 
  18. <body> 
  19. <h2>使用CSS1做出的效果（有BUG）</h2> 
  20. <ul> 
  21. <li><ahrefahref="#"title="">鼠標(biāo)移過來觸發(fā)我吧！
  22. <span>哈哈，終于被你發(fā)現(xiàn)</span></a></li> 
  23. </ul> 
  24. </body> 
  25. </html> 

[可先修改部分代碼再運行查看效果]

　　可我們發(fā)現(xiàn)上例中的效果，在IE6中依然無法顯示，難道我們的代碼寫錯了，可檢查來檢查去一點錯誤也沒有（不信你找個高高手問問，他們依然會回答你，這代碼完全正確），難道是標(biāo)準(zhǔn)中的說明是錯的？還是IE6瀏覽器連CSS1也不支持？#p#

那到底是什么問題呢？

　　不是標(biāo)準(zhǔn)說明的錯，也不是IE瀏覽器不支持CSS1，而是IE瀏覽器自身解析的問題，是IE5.5和IE6中偽類:hover的BUG。

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

　　◆這個BUG可以通過在鏈接的屬性中增加某些特殊的CSS屬性聲明來消除。下面我們對上面的第二個例子進(jìn)行實驗，究竟哪些屬性可以幫我們來消除這些BUG。

　　對CSS代碼我們增加：

  1. lia:hover{}  
  2.  

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

　　我們再用其他屬性進(jìn)行設(shè)置：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。

　　我們發(fā)現(xiàn)除了text-decoration，color，z-index不能觸發(fā)顯示（對于不能觸發(fā)顯示的部分，可以還有某些遺漏的屬性，歡迎朋友補(bǔ)充）外，其他屬性均可以做為消除偽類:hoverBUG的特定屬性。

說明：
　　1、對于dispaly不可以用本例來測試，可另外寫個更簡單的例子（去除ul/li，a和span中的position）。在實際應(yīng)用中懌飛不建議改變display值來做為特定屬性消除此BUG，而且在某些例子中此屬性不一定能消除BUG。
　　2、對于做為特定屬性的border和background中的顏色我們還可用全寫和簡寫來改變，如#fff和#ffffff在消除BUG中解析為2個不同的值。

◆最終效果：

SourceCodetoRun

  1. <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"  
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  3. <htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml"> 
  4. <head> 
  5. <metahttp-equivmetahttp-equiv="Content-Type"
  6. content="text/html;charset=gb2312"/> 
  7. <title>css</title> 
  8. <styletypestyletype="text/css"> 
  9. ul{list-style:none;}  
  10. li{height:100px;width:100px;background:#000;font-size:12px;}  
  11. lia{display:block;height:100px;width:100px;  
  12. position:relative;color:#fff;text-decoration:none;}  
  13. lia:hover{background:#ccc;}  
  14. lispan{display:none;}  
  15. lia:hoverspan{display:block;width:100px;height:100px;  
  16. background:#c00;position:absolute;top:50px;left:50px;color:#fff;}  
  17. </style> 
  18. </head> 
  19. <body> 
  20. <h2>使用CSS1做出的效果（無BUG）</h2> 
  21. <ul> 
  22. <li><ahrefahref="#"title="">鼠標(biāo)移過來觸發(fā)我吧！
  23. <span>哈哈，終于被你發(fā)現(xiàn)</span></a></li> 
  24. </ul> 
  25. </body> 
  26. </html> 

[可先修改部分代碼再運行查看效果]

【編輯推薦】

  1. CSS代碼結(jié)構(gòu)中id及class類命名探究
  2. 解析三大CSS選擇器使用
  3. CSS選擇器中類型和后代選擇器使用秘笈
  4. 解析四大CSS屬性值選擇器用法
  5. 專家推薦 DIV CSS表單布局的五個小技巧
責(zé)任編輯：佚名 來源： 52css.com
CSS偽類hover
相關(guān)推薦

2013-10-30 09:57:43

IECSS

2010-09-08 14:00:08

marginCSS

2010-09-06 11:26:18

CSS偽類

2013-10-31 11:12:56

IECSS

2013-09-09 10:51:07

CSSIE瀏覽器

2009-08-13 10:12:07

IE的CSS Bug

2020-08-18 08:08:59

CSS偽元素偽類

2010-09-03 11:24:49

CSS偽類

2010-09-06 14:36:41

CSSIENascape

2021-04-20 09:44:42

CSS函數(shù)選擇器

2013-10-28 14:01:03

IECSS

2010-09-07 10:57:34

CSS偽類

2010-08-31 09:24:29

FireFoxIECSS

2022-10-19 12:00:32

CSS 偽類偽元素

2010-08-18 10:37:16

IE6IE7IE8

2010-09-15 11:08:48

CSSIE6IE7

2010-08-17 15:38:49

CSS兼容IE7IE8

2013-10-31 10:59:23

IECSS

2010-08-19 09:29:26

hoverIE6

2010-09-07 10:07:40

CSS
點贊
收藏

51CTO技術(shù)棧公眾號