日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問(wèn)題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案
IE中中CSS偽類:hover的使用及其BUG

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

創(chuàng)新互聯(lián)是一家專業(yè)提供將樂(lè)企業(yè)網(wǎng)站建設(shè),專注與成都網(wǎng)站制作、網(wǎng)站建設(shè)、成都h5網(wǎng)站建設(shè)、小程序制作等業(yè)務(wù)。10年已為將樂(lè)眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)絡(luò)公司優(yōu)惠進(jìn)行中。

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

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

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

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

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

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

　　我們先用CSS2的寫法來(lái)實(shí)現(xiàn)：

XHTML部分：

ExampleSourceCode

 
 
 
    
  
  
  
    1. 
  
  
  
    • 鼠標(biāo)移過(guò)來(lái)觸發(fā)我吧！
      • 
  
  
  
    • 哈哈，終于被你發(fā)現(xiàn)了！
      • 
  
  
  
    2. 
  
  
  
  2.

 CSS部分：

ExampleSourceCode

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

◆查看效果：

SourceCodetoRun

 
 
 
    
  
  
  
  1. 
  
  
  
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    3. 
  
  
  
    4. 
  
  
  
  4. 
  
  
  
    6. 
  
  
  
  6. css
    7. 
  
  
  
    8. 
  
  
  
  8. ul{list-style:none;} 
    9. 
  
  
  
  9. li{height:100px;width:100px;background:#000; 
    10. 
  
  
  
  10. font-size:12px;color:#fff;position:relative;} 
    11. 
  
  
  
  11. lia{display:none;} 
    12. 
  
  
  
  12. li:hovera{display:block;text-decoration:none;width:100px;height:100px;background:#c00; 
    13. 
  
  
  
  13. position:absolute;top:50px;left:50px;color:#fff;} 
    14. 
  
  
  
  14. 
  
  
  
  15. 
  
  
  
  16. 
  
  
  
  17. 使用CSS2做出的效果
    18. 
  
  
  
    18. 
  
  
  
    • 鼠標(biāo)移過(guò)來(lái)觸發(fā)我吧！哈哈，終于被你發(fā)現(xiàn)了！
      • 
  
  
  
    19. 
  
  
  
  19. 
  
  
  
  20. 
  
  
  
  21.

 [可先修改部分代碼再運(yùn)行查看效果]#p#

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

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

XHTML部分：

ExampleSourceCode

 
 
 
    
  
  
  
    1. 
  
  
  
    • 鼠標(biāo)移過(guò)來(lái)觸發(fā)我吧！哈哈，終于被你發(fā)現(xiàn)
      • 
  
  
  
    2. 
  
  
  
  2.

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

CSS部分：

ExampleSourceCode

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

 ◆查看效果：

SourceCodetoRun

 
 
 
    
  
  
  
  1. 
  
  
  
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    3. 
  
  
  
    4. 
  
  
  
  4. 
  
  
  
  5. 
  
  
  
  6. content="text/html;charset=gb2312"/>
    7. 
  
  
  
  7. css
    8. 
  
  
  
    9. 
  
  
  
  9. ul{list-style:none;} 
    10. 
  
  
  
  10. li{height:100px;width:100px;background:#000;font-size:12px;} 
    11. 
  
  
  
  11. lia{display:block;height:100px;width:100px;position:relative; 
    12. 
  
  
  
  12. color:#fff;text-decoration:none;} 
    13. 
  
  
  
  13. lispan{display:none;} 
    14. 
  
  
  
  14. lia:hoverspan{display:block;width:100px;height:100px;background:#c00; 
    15. 
  
  
  
  15. position:absolute;top:50px;left:50px;color:#fff;} 
    16. 
  
  
  
  16. 
  
  
  
  17. 
  
  
  
  18. 
  
  
  
  19. 使用CSS1做出的效果（有BUG）
    20. 
  
  
  
    20. 
  
  
  
    • 鼠標(biāo)移過(guò)來(lái)觸發(fā)我吧！
      • 
  
  
  
    • 哈哈，終于被你發(fā)現(xiàn)
      • 
  
  
  
    21. 
  
  
  
  21. 
  
  
  
  22.

[可先修改部分代碼再運(yùn)行查看效果]

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

那到底是什么問(wèn)題呢？

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

那又該如何解決這個(gè)問(wèn)題呢？

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

　　對(duì)CSS代碼我們?cè)黾樱?/p>

 
 
 
    
  
  
  
  1. lia:hover{} 
    2. 
  
  
  
  2.

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

　　我們?cè)儆闷渌麑傩赃M(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ā)顯示（對(duì)于不能觸發(fā)顯示的部分，可以還有某些遺漏的屬性，歡迎朋友補(bǔ)充）外，其他屬性均可以做為消除偽類:hoverBUG的特定屬性。

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

◆最終效果：

SourceCodetoRun

 
 
 
    
  
  
  
  1. 
  
  
  
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    3. 
  
  
  
    4. 
  
  
  
  4. 
  
  
  
  5. 
  
  
  
  6. content="text/html;charset=gb2312"/>
    7. 
  
  
  
  7. css
    8. 
  
  
  
    9. 
  
  
  
  9. ul{list-style:none;} 
    10. 
  
  
  
  10. li{height:100px;width:100px;background:#000;font-size:12px;} 
    11. 
  
  
  
  11. lia{display:block;height:100px;width:100px; 
    12. 
  
  
  
  12. position:relative;color:#fff;text-decoration:none;} 
    13. 
  
  
  
  13. lia:hover{background:#ccc;} 
    14. 
  
  
  
  14. lispan{display:none;} 
    15. 
  
  
  
  15. lia:hoverspan{display:block;width:100px;height:100px; 
    16. 
  
  
  
  16. background:#c00;position:absolute;top:50px;left:50px;color:#fff;} 
    17. 
  
  
  
  17. 
  
  
  
  18. 
  
  
  
  19. 
  
  
  
  20. 使用CSS1做出的效果（無(wú)BUG）
    21. 
  
  
  
    21. 
  
  
  
    • 鼠標(biāo)移過(guò)來(lái)觸發(fā)我吧！
      • 
  
  
  
    • 哈哈，終于被你發(fā)現(xiàn)
      • 
  
  
  
    22. 
  
  
  
  22. 
  
  
  
  23.

[可先修改部分代碼再運(yùn)行查看效果]


網(wǎng)站欄目：IE中中CSS偽類:hover的使用及其BUG
文章轉(zhuǎn)載：http://www.dlmjj.cn/article/cohgcjp.html