当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > 解决IE7以下版本不支持无A状态伪类的几种方法

CSS样式表
20个优秀CSS网站（3月精选）
网页颜色搭配技巧 文字字体、字号、字体排版等
让人不得不佩服的CSS效果
非常漂亮的Div+CSS布局入门教程
推荐彻底弄懂CSS盒子模式(DIV布局快速入门)
CSS opacity - 实现图片半透明效果的代码
代码实例之纯CSS代码实现翻页效果
比较漂亮的一个导航条的效果DIV+CSS
DIV+CSS布局教程大全与pdf电子书 下载
HTML 30分钟入门教程
css滤镜基础教程
css滤镜效果（一）
css滤镜效果（二）
巧用CSS的MASK滤镜
css动态模糊效果
div+css详解定位与定位应用
彻底弄懂CSS盒子模式系列教程集合
用<TABLE>语句来实现圆角表格可以省去制作圆角图片之苦！
HTML下在IE浏览器中的专有条件注释讲解
用css实现的灰度/原色连接效果

No. « 85 86 87 88 »

技术文章搜索

关键字

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

出处:互联网   整理: 软晨网（RuanChen.com）   发布: 2009-09-12   浏览: 90 ::
收藏到网摘: n/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这类东西，行为和结构不分离，不推荐使用。