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

发布时间:2022-04-17 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了解决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文件.
@L_777_1@ 代码如下:

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这类东西,行为和结构不分离,不推荐使用。

脚本宝典总结

以上是脚本宝典为你收集整理的解决IE7以下版本不支持无A状态伪类的几种方法全部内容,希望文章能够帮你解决解决IE7以下版本不支持无A状态伪类的几种方法所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。
标签: