解決IE7以下版本不支持無A狀態(tài)偽類的幾種方法

更新時間：2007年01月29日 00:00:00 作者：

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

javascript文件，來自Htmldog .

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"); 

腳本可改動的部分

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

CSS

    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及以下版本的。需注意的是，你給某標簽設定了，那么整個頁面內的這個標簽都會沿用同一個樣式。
方法二

javascript文件.

復制代碼代碼如下:

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(); 

腳本可改動的部分

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

CSS

   1. .hovereffect{
   2. Background: #CCC;
   3. }

在需要應用效果的地方用class="hovereffect"調用。這種方法比較靈活。
方法三

使用網上常見的onmouseover、onmouseout這類東西，行為和結構不分離，不推薦使用。