CSS偽類:hover在IE中使用及其BUG_CSS教程

      編輯Tag賺U幣
      教程Tag:暫無Tag,歡迎添加,賺取U幣!
        原文作者:Blank 懌飛
        偽類:hover是我們在CSS設(shè)計中最常運用的偽類之一,許多絢麗效果的實現(xiàn)離不開偽類:hover,比如我們常見的純CSS菜單、相冊效果等等。
        或許用了這么久的偽類:hover,還有部分朋友還不完全了解hover的規(guī)則:

      示例代碼 [www.wf0088.com]
      在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部分:

      示例代碼 [www.wf0088.com]
      <ul>
      <li>鼠標(biāo)移過來觸發(fā)我吧!<a href="#" title="">哈哈,終于被你發(fā)現(xiàn)了!</a></li>
      </ul>

      CSS部分:

      示例代碼 [www.wf0088.com]
      * {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;}

      查看效果:

      代碼調(diào)試框 [www.wf0088.com]

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

        大家可以測試發(fā)現(xiàn)在FF等對CSS2支持很好的瀏覽器中,可以顯示我們所要達(dá)到的效果,但在IE6中卻無法實現(xiàn)。
        下面讓我們換一種思維,所用CSS1的寫法來看看,這個時候由于無法支持li元素:hover的使用,我們只好把所有文字包含到a中,對a使用:hover,并且將要顯示隱藏的部分放到span元素中,首先我們對XHTML進(jìn)行部分調(diào)整,調(diào)整如下:

      XHTML部分:

      示例代碼 [www.wf0088.com]
      <ul>
      <li><a href="#" title="">鼠標(biāo)移過來觸發(fā)我吧!<span>哈哈,終于被你發(fā)現(xiàn)</span></a></li>
      </ul>

        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部分:

      示例代碼 [www.wf0088.com]
      * {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; }

      查看效果:

      代碼調(diào)試框 [www.wf0088.com]

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

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

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

        那又該如何解決這個問題呢?
        這個BUG可以通過在鏈接的屬性中增加某些非凡的CSS屬性聲明來消除。
        下面我們對上面的第二個例子進(jìn)行實驗,究竟哪些屬性可以幫我們來消除這些BUG。
        對CSS代碼我們增加:

      示例代碼 [www.wf0088.com]
      li a:hover {}

        對其屬性我們僅設(shè)定width:100px;發(fā)現(xiàn)在IE6中依舊沒有變化,我們嘗試著更改width的value,比如使其width:99px,希奇的事情發(fā)生了,在IE6中,隱藏的部分在觸發(fā)的時候顯示出來了。我們再對li a: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ǔ)充)外,其他屬性均可以做為消除偽類:hover BUG的特定屬性。

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

      最終效果:

      代碼調(diào)試框 [www.wf0088.com]

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

        

      來源:無憂整理//所屬分類:CSS教程/更新時間:2007-03-30
      相關(guān)CSS教程