当前位置： 移动技术网 > IT编程>网页制作>CSS > 解决IE7以下版本不支持无A状态伪类的几种方法

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

2017年12月12日  | 移动技术网IT编程  | 我要评论
在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这类东西，行为和结构不分离，不推荐使用。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网