解决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文件.
复制代码 代码如下:

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



相关阅读:
asp之日期和时间函数示例
php基础知识:类与对象(1)
JSON:数据传递的另一种模式
JavaScript Event学习第十一章 按键的检测
RedHatLinux AS3中配置sendmail服务器
php header Content-Type类型小结
微盾PHP脚本加密专家php解密算法
在CentOS上安装Sensors主机温度监控程序
Ports & Package
2010全面兼容多浏览器IE6-IE7-IE8-FF的CSS HACK写法
Exchange2000中OWA疑问解答(二)
细化解析:Oracle与SQL过程之间的转化
Windows7技巧:加速开机和关机的方法
CSS高级技巧:文字环绕图片
快速导航

Copyright © 2016 phpStudy | 皖ICP备18014864号-4