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

Nice CSS/HTML

2022-04-15 0 1,142

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

微信