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

javascript文件 代码:

[js]
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&lt;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");
[/js]

脚本可改动的部分

[js]
//这里写入你需要效果的标签

suckerfish(sfHover, "INPUT");
suckerfish(sfFocus, "INPUT");
suckerfish(sfHover, "p");
[/js]

CSS

[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;
}
[/css]

上面代码中第一个类是给支持CSS2的浏览器，第二个是给IE6及以下版本的。需注意的是，你给某标签设定了，那么整个页面内的这个标签都会沿用同一个样式。

javascript文件代码：

[js]
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();
[/js]

脚本可改动的部分

[js]
if (allElements[i].className.indexOf(‘hovereffect’) !=-1 )
[/js]

CSS

[css]
.hovereffect{background:#CCC;}
[/css]

在需要应用效果的地方用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文件下载地址：点击下载