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

时间:2008-03-28 23:09:17   来源:玉宇域  作者:  点击:次  出处:技术无忧
关键字:ie6 a div java html

我们在做数据表格的时候,经常需要做鼠标经过一行变色的效果,以前碰到这个问题只能用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文件下载地址:

c11cffd77d709228dd7ac382a4b92557.rar
文件类型: *.rarc11cffd77d709228dd7ac382a4b92557.rar (11.53 KB)
Empire CMS,phome.net

文章评论

共有 0 位网友发表了评论 此处只显示部分留言 点击查看完整评论页面