手机
当前位置:查字典教程网 >网页设计 > Div+Css教程 >解决IE7以下版本不支持无A状态伪类的几种方法
解决IE7以下版本不支持无A状态伪类的几种方法
摘要:在IE7以下版本一直是不支持无A状态伪类的,通常都要靠Javascript来解决的,最近经常有人问起此类问题,故整理了几种方法,脚本来自国外...

在IE7以下版本一直是不支持无A状态伪类的,通常都要靠Javascript来解决的,最近经常有人问起此类问题,故整理了几种方法,脚本来自国外网站,供大家参考。

方法一

javascript文件,来自Htmldog.

复制代码 代码如下:

functionsuckerfish(type,tag,parentId){

if(window.attachEvent){

window.attachEvent("onload",function(){

varsfEls=(parentId==null)?document.getElementsByTagName(tag):document.getElementById(parentId).getElementsByTagName(tag);

type(sfEls);

});

}

}

sfHover=function(sfEls){

for(vari=0;i<sfEls.length;i++){

sfEls[i].onmouseover=function(){

this.className+="sfhover";

}

sfEls[i].onmouseout=function(){

this.className=this.className.replace(newRegExp("sfhoverb"),"");

}

}

}

sfFocus=function(sfEls){

for(vari=0;i<sfEls.length;i++){

sfEls[i].onfocus=function(){

this.className+="sffocus";

}

sfEls[i].onblur=function(){

this.className=this.className.replace(newRegExp("sffocusb"),"");

}

}

}

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:1pxsolidred;

}

input:hover,input.sfhover{

background:#EEE;

color:#369;

border:1pxsolid#069;

}

p:hover,p.sfhover{

background:#EEE;

color:#333;

border:1pxsolid#069;

}

p:hover,p.sfhover{

background:#EEE;

color:#333;

}

上面代码中第一个类是给支持CSS2的浏览器,第二个是给IE6及以下版本的。需注意的是,你给某标签设定了,那么整个页面内的这个标签都会沿用同一个样式。

方法二

javascript文件.

复制代码 代码如下:

varW3CDOM=(document.createElement&&document.getElementsByTagName);

//window.onload=pinballEffect;

functionpinballEffect()

{

if(!W3CDOM)return;

varallElements=document.getElementsByTagName('*');

varoriginalBackgrounds=newArray();

for(vari=0;i<allElements.length;i++)

{

if(allElements[i].className.indexOf('hovereffect')!=-1)

{

allElements[i].onmouseover=mouseGoesOver;

allElements[i].onmouseout=mouseGoesOut;

}

}

}

functionmouseGoesOver()

{

originalClassNameString=this.className;

this.className+="lay-on";

}

functionmouseGoesOut()

{

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状态伪类的几种方法】相关文章:

清除行内元素之间HTML空白的几种解决方案

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

解决火狐浏览器按钮的水平居中

纯CSS实现鼠标悬停提示的方法

CSS教程:闭合CSS浮动元素的几种方法

添加css样式的三种方法

为不同的浏览器载入不同CSS的二种方法

CSS div居中的三种方法

控制DIV中文字绝对居中的简单方法

CSS条状图表形式的实现方法

精品推荐
分类导航