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

所属栏目:兼容性问题 时间:2014-01-08 来源:网络 作者:不详 点击:

  在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();

脚本可改动的部分

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

CSS

.hovereffect{ 
Background: #CCC; 
}

在需要应用效果的地方用class="hovereffect"调用。这种方法比较灵活。


方法三

使用网上常见的onmouseover、onmouseout这类东西,行为和结构不分离,不推荐使用。

请站长喝杯咖啡?

站长一直坚持白天工作、晚上熬夜更新素材,付出了巨大的精力和时间,其中的辛酸难以言述。

坚持免积分、免登录、无任何限制下载!如果本站素材对你有用,不妨考虑请站长喝杯咖啡鼓励一下!

标签:

你应该也喜欢这些吧

共有 0 条评论

给个评价吧

验证码: