您现在的位置是:门户> 编程语言> HTML/CSS

解决IE7以下版本不支持无A状态伪类的几种方法
2020-04-08 25人围观 0条评论
简介解决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[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[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    {
            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这类东西,行为和结构不分离,不推荐使用。
分享:

文章评论