解决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"); 
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"); 
   //这里写入你需要效果的标签
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;  
} 
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();
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) 
if (allElements[i].className.indexOf('hovereffect') !=-1)

CSS

.hovereffect{  
Background: #CCC;  
} 
.hovereffect{
Background: #CCC;
}

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

方法三

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

最新相关文章

• ·CSS教程之关于框架网页设计
• ·CSS设计网页头部的优化写法
• ·控制网页文件大小通过精简CSS实现
• ·CSS制作符合网站标准的细线表格
• ·增加CSS的overflow属性来清除浮动
• ·CSS教程之网页表单设计技巧
• ·与表格边框有关的CSS语法
• ·多个CSS样式表争夺特定选择符的控制权
• ·学习CSS制作网页总结的一些经验
• ·纯CSS制作的新闻网站中的文章列表
• ·CSS教程:CSS中的定位（position）
• ·CSS布局实例:上中下三行,中间自适应
• ·实用：CSS常见问题和技巧总结
• ·CSS模块化设计——从空格谈起
• ·css属性之媒体（Media）类型
• ·DIV+CSS常见错误汇总