解決IE7以下版本不支持無A狀態(tài)偽類的幾種方法！_Web標(biāo)準(zhǔn)教程
      
編輯Tag賺U幣
      


      教程Tag：暫無Tag,歡迎添加,賺取U幣!
      


      
　　在IE7以下版本一直是不支持無A狀態(tài)偽類的，通常都要靠Javascript來解決的，最近經(jīng)常有人問起此類問題，故整理了幾種方法，腳本來自國外網(wǎng)站，供大家參考。

      方法一 
      　　javascript文件，來自Htmldog . 

      

      

       示例代碼 [www.wf0088.com]
      

      function suckerfish(type, tag, parentId) { 
      if (window.attachEvent) { 
      window.attachEvent("onload", function() { 
      var sfEls = (parentId==null)?document.getElementsByTagName(tag):document.getElementById(parentId).getElementsByTagName(tag); 
      type(sfEls); 
      }); 
      } 
      } 
      sfHover = function(sfEls) { 
      for (var i=0; i < sfEls.length; i ) { 
      sfEls[i].onmouseover=function() { 
      this.className =" sfhover"; 
      } 
      sfEls[i].onmouseout=function() { 
      this.className=this.className.replace(new RegExp(" sfhover\\b"), ""); 
      } 
      } 
      } 
      sfFocus = function(sfEls) { 
      for (var i=0; i < sfEls.length; i ) { 
      sfEls[i].onfocus=function() { 
      this.className =" sffocus"; 
      } 
      sfEls[i].onblur=function() { 
      this.className=this.className.replace(new RegExp(" sffocus\\b"), ""); 
      } 
      } 
      } 
      suckerfish(sfHover, "INPUT"); 
      suckerfish(sfFocus, "INPUT"); 
      suckerfish(sfHover, "p");
      

      

      　　腳本可改動的部分

      

      

       示例代碼 [www.wf0088.com]
      

      //這里寫入你需要效果的標(biāo)簽 
      suckerfish(sfHover, "INPUT"); 
      suckerfish(sfFocus, "INPUT"); 
      suckerfish(sfHover, "p");
      

      

      CSS

      

      

       示例代碼 [www.wf0088.com]
      

      input:focus,input.sffocus { 
      background: #F8F8F8; 
      color: #333333; 
      border: 1px solid red; 
      } 
      input:hover,input.sfhover{ 
      background: #EEE; 
      color: #369; 
      border: 1px solid #069; 
      } 
      p:hover,p.sfhover{ 
      background: #EEE; 
      color: #333; 
      border: 1px solid #069; 
      } 
      p:hover,p.sfhover{ 
      background: #EEE; 
      color: #333; 
      } 
      

      

      　　上面代碼中第一個類是給支持CSS2的瀏覽器，第二個是給IE6及以下版本的。需注重的是，你給某標(biāo)簽設(shè)定了，那么整個頁面內(nèi)的這個標(biāo)簽都會沿用同一個樣式。 

      方法二

      　　javascript文件

      

      

       示例代碼 [www.wf0088.com]
      

      var W3CDOM = (document.createElement && document.getElementsByTagName); 
      //window.onload = pinballEffect; 
      function pinballEffect() 
      { 
      if (!W3CDOM) return; 
      var allElements = document.getElementsByTagName('*'); 
      var originalBackgrounds=new Array(); 
      for (var i=0; i < allElements.length; i ) 
      { 
      if (allElements[i].className.indexOf('hovereffect') !=-1) 
      { 
      allElements[i].onmouseover = mouseGoesOver; 
      allElements[i].onmouseout = mouseGoesOut; 
      } 
      } 
      } 
      function mouseGoesOver() 
      { 
      originalClassNameString = this.className; 
      this.className = " lay-on"; 
      } 
      function mouseGoesOut() 
      { 
      this.className = originalClassNameString; 
      } 
      pinballEffect(); 
      

      

      　　腳本可改動的部分 

      

      

       示例代碼 [www.wf0088.com]
      

      if (allElements[i].className.indexOf('hovereffect') !=-1)
      

      

      　　CSS

      

      

       示例代碼 [www.wf0088.com]
      


      .hovereffect{ 
      Background: #CCC; 
      } 
      

      

      　　在需要應(yīng)用效果的地方用class="hovereffect"調(diào)用。這種方法比較靈活。

      方法三

      　　使用網(wǎng)上常見的onmouseover、onmouseout這類東西，行為和結(jié)構(gòu)不分離，不推薦使用。
      　　


      

      



      


      來源：無憂整理//所屬分類：Web標(biāo)準(zhǔn)教程/更新時間：2007-09-29


      

      



      


      



      相關(guān)Web標(biāo)準(zhǔn)教程：