DOM案例之-----------隔行变色、鼠标移动变色_dom中事件处理监视鼠标移动背景颜色随着鼠标移动而改变-CSDN博客

本文链接：https://blog.csdn.net/wxlhlh001/article/details/7307523

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>隔行变色</title>
<style>
.top{
background-color:#FF9900;
color: #00F}
table{
border:1px #F0F dashed;
border-collapse:collapse;
}
td,th{
border:#999 1px solid;}
.one{
background-color:#FFC;
}
.two{
background-color:#FCC}
.over{
background-color:#C90;}
</style>
<script>
function geHang(){

//获取所有的tr
var trlist=document.getElementsByTagName("tr");

for(var i=1;i<trlist.length;i++){

  //进行判断
  if(i%2==0){
     trlist[i].className="two";
  }else{
   trlist[i].className="one";
   }


  var oldcolor;

  //实现当鼠标移动到该行，改行背景加深
  trlist[i].οnmοuseοver=function (){
   oldcolor=this.className;
   //重新设定新的颜色
   this.className="over";
  }

  trlist[i].οnmοuseοut=function (){

   //当鼠标离开，自动还原改行的颜色
   this.className=oldcolor;
  }

}

}