解决IE7以下版本不支持无A状态伪类的几种方法
程序员文章站
2024-02-28 23:37:46
在ie7以下版本一直是不支持无a状态伪类的,通常都要靠javascript来解决的,最近经常有人问起此类问题,故整理了几种方法,脚本来自国外网站,供大家参考。 方法一 ja...
在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这类东西,行为和结构不分离,不推荐使用。
方法一
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这类东西,行为和结构不分离,不推荐使用。