当前位置：首页 > 资讯 > 技术文档

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

时间：2021-09-28 22:18 编辑：来源：阅读：
扫一扫，手机访问

摘要：解决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文件.

[u]复制代码[/u] 代码如下:

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

全部评论(0)

上一篇：用css filter做鼠标滑过图片效果
下一篇：百分比的细节－－容器大小篇

资讯排行榜
更多>>