Home Page arrow Web Article arrow ie6不支持无A状态伪类的解决办法

ie6不支持无A状态伪类的解决办法

文章分类 网络摘记 - 代码手记 | 发布时间 Date:2008-01-28 | 浏览次数 View:11077

我们在做数据表格的时候，经常需要做鼠标经过一行变色的效果，以前碰到这个问题只能用onmouseover、onmouseout这类东西来解决，每行都加而且也只能改变背景颜色，效果不佳。其实在CSS中定义tr、td的伪类hover很容易能做出这样的效果，而且样式可以自定义的丰富美观。但遗憾的是现在占据主流浏览器的IE6所支持的CSS1中，此伪类仅可用于a对象，且对于无href属性（特性）的a对象，此伪类不发生作用，而IE7和Firefox所支持的CSS2中此伪类可以应用于任何对象。
心有不甘，终于在网上找到了一些解决的办法：

javascript文件
代码:

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;  
} 
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 += " hovereffect-on";
}
function mouseGoesOut()
{
 this.className = originalClassNameString;
}
//pinballEffect();

脚本可改动的部分 

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

CSS

.hovereffect{  
Background: #CCC;  
} 

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

调用js库： IE7 .js

IE7是一个老外写的Js库，包括若干js脚本，使ie6可以支持一些css2乃至css3的内容，因此他给这个js库起名为“IE7”。
原文：http://dean.edwards.name/ie7/overview/
老外声明：使IE支持W3C标准的CSS及HTML。
支持下列选择器：

  • namespace
  • parent > child（子选择器）
  • adjacent + sibling（相邻兄弟选择器）
  • adjacent ~ sibling（普通兄弟选择器，css3）
  • [attr], [attr="value"], [attr~="value"] etc（属性选择器）
  • .multiple.classes (fixes bug)
  • :hover, :active, :focus （对所有元素）
  • :first-child, :last-child, :only-child, :nth-child, :nth-last-child（后几个是CSS3中的伪类）
  • :check, :disabled, :enabled
  • :root, :empty, :contains(), :not()
  • :before/:after/content:（CSS2中的伪元素）
  • :lang（CSS2中的伪类）

另外：

  • 支持 HTML and XML
  • 支持导入（@import）样式表
  • 保持了样式表的“层叠”
  • 不用改变文档结构
  • 不会用 js 反复查询 DOM树
  • 使用纯粹的 CSS 执行样式规则
  • 在 standards 和 quirks 两种模式中，都支持W3C box model
  • 支持 fixed（固定）定位 (flicker free)
  • 支持 overflow:visible
  • 支持 min/max-width/height
  • fixes broken (X)HTML elements (abbr, object)
  • 标准化的窗体行为
  • 支持 PNG 图片的 alpha 透明
  • 轻量级的 script (22K)
  • completely modular (add/remove fixes)
  • works for Microsoft Internet Explorer 5+ (Windows only)
    这种方法很简单，直接调用，所有问题解决，但JS文件较大，可能影响浏览速度！

以上三种方法全部JS文件下载地址：点击下载

 web article 代码手记 ie6不支持无A状态伪类的解决办法 ie6 hover 伪类 解决方法
Related Articles

网摘: Google书签 Yahoo书签 雅虎收藏夹 365Key网摘 新浪ViVi 百度收藏 天极网摘 diglog 和讯网摘 POCO网摘 YouNote网摘 博拉网 天下图摘 spurl blogmarks BlinkList reddit digg Del.icio.us QQ书签 推荐到鲜果

评论 (2)
12008-02-03 13:44
 
to dudu 
能不能把你的方法写出来，给我分享下呢？
注册会员
  
yuyu
22008-02-03 09:32
 
对于非标浏览器，我是使用在CSS中调用HTC文件(JS脚本)来解决的，结构方面更清晰。
访客
  
dudu

发表评论
  • 评论内容中的链接自动增加rel="nofollow"，搜索引擎不会收录，请不要利用评论来做广告，此类话题将被删除。
  • rel="nofollow" in use - do not spam, do not advertise! un-related or spam comments will be deleted.
姓名:
评论:



验证码：* Code
 
解决Div自适应高度的方法 < 上一篇   下一篇 > 关于标题字符截取
▲TOP