解决IE7以下版本不支持无A状态伪类的几种方法


            在IE7以下版本一直是不支持无A状态伪类的，通常都要靠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这类东西，行为和结构不分离，不推荐使用。