鼠标经过背景变色，CSSJavascript实现表格背景变色

第一种：

 

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
< HTML >
< HEAD >
< TITLE >  CSS样式里使用JavaScript(onmouseover/onmouseout)2 </ TITLE >
< META  NAME ="Generator"  CONTENT ="EditPlus" >
< META  NAME ="Author"  CONTENT ="" >
< META  NAME ="Keywords"  CONTENT ="" >
< META  NAME ="Description"  CONTENT ="" >

< style  type ="text/css" >
table
{

 background-color : #000000 ;
 cursor : hand ;
}

td
{
   /* 设置onmouseover事件 */
  onmouseover :  expression(οnmοuseοver=function (){this.style.borderColor ='blue' ; this.style.color='red';this.style.backgroundColor ='yellow' } );

   /* 设置onmouseout事件 */
  onmouseout: expression(οnmοuseοut=function () { this.style.borderColor='';this.style.color='';this.style.backgroundColor ='' } );
  background-color:#ffffff;
}
</ style >
</ HEAD >

< BODY >
< TABLE  cellspacing ='1px'  border ='1' >
< TR  >
  < TD  > 1......     </ TD >
  < TD > 2......    </ TD >
  < TD > 3......    </ TD >
</ TR >
< TR  >
  < TD  > 4......     </ TD >
  < TD > 5......    </ TD >
  < TD > 6......    </ TD >
</ TR >
</ TABLE >
</ BODY >
</ HTML >  

 

第二种：

 

< style >
body  {
 font :  normal 11px auto "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif ;
 color :  #4f6b72 ;
 background :  #E6EAE9 ;
}
a  {
 color :  #c75f3e ;
}
td  {
 border-right :  1px solid #C1DAD7 ;
 border-bottom :  1px solid #C1DAD7 ;
 font-size : 11px ;
 padding :  6px 6px 6px 12px ;
 color :  #4f6b72 ;

}
th  {
 font :  bold 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif ;
 color :  #4f6b72 ;
 border-right :  1px solid #C1DAD7 ;
 border-bottom :  1px solid #C1DAD7 ;
 border-top :  1px solid #C1DAD7 ;
 letter-spacing :  2px ;
 text-transform :  uppercase ;
 text-align :  left ;
 padding :  6px 6px 6px 12px ;
 background :  #CAE8EA url(/images/bg_header.jpg) no-repeat ;
}

tr { background-color : expression((this.rowIndex%2==0)?"#EEEEEE":"#FFFFFF") ; ryo : expression(οnmοuseοver=function(){this.style.backgroundColor='#FFCCFF' } ,οnmοuseοut=function() { this.style.backgroundColor=(this.style.backgroundColor='#CCFFFF'?((this.rowIndex%2==0)?"#EEEEEE" : "#FFFFFF"):'#CCFFFF') } ,οnclick=function() { this.style.backgroundColor='#CCFFFF' } )}

</ style >
< table  cellspacing ="0" >
< TBODY >
< TR  align =middle  >
< TH > 合同编号 </ TH >
< TH > 合同内容 </ TH >
< TH > 合同金额 </ TH >
< TH > 交货期 </ TH >
< TH > Tyres </ TH >
< TH > Fastest Lap </ TH >
< TH > 国家 </ TD ></ TH >
< TR >
< TD > Michael </ TD >
< TD > Schumacher </ TD >
< TD > Ferrari </ TD >
< TD > Ferrari </ TD >
< TD > Bridgestone </ TD >
< TD > 1.15.872 </ TD >
< TD > 德国 </ TD ></ TR >
< TR >
< TD > Rubens </ TD >
< TD > Barrichello </ TD >
< TD > Ferrari </ TD >
< TD > Ferrari </ TD >
< TD > Bridgestone </ TD >
< TD > 1.16.760 </ TD >
< TD > 法国 </ TD ></ TR >
< TR >
< TD > Ralph </ TD >
< TD > Schumacher </ TD >
< TD > Williams </ TD >
< TD > BMW </ TD >
< TD > Michelin </ TD >
< TD > 1.16.297 </ TD >
< TD > 美国 </ TD ></ TR >
< TR >
< TD > Juan-Pablo </ TD >
< TD > Montoya </ TD >
< TD > Williams </ TD >
< TD > BMW </ TD >
< TD > Michelin </ TD >
< TD > 1.17.123 </ TD >
< TD > 柬埔寨 </ TD ></ TR >
< TR >
< TD > David </ TD >
< TD > Coulthard </ TD >
< TD > McLaren </ TD >
< TD > Mercedes </ TD >
< TD > Bridgestone </ TD >
< TD > 1.16.423 </ TD >
< TD > 泰国 </ TD ></ TR >
< TR >
< TD > Mika </ TD >
< TD > Hakkinen </ TD >
< TD > McLaren </ TD >
< TD > Mercedes </ TD >
< TD > Bridgestone </ TD >
< TD > 1.16.979 </ TD >
< TD > 越南 </ TD ></ TR >
< TR >
< TD > Jarno </ TD >
< TD > Trulli </ TD >
< TD > Jordan </ TD >
< TD > Honda </ TD >
< TD > Bridgestone </ TD >
< TD > 1.16.459 </ TD >
< TD > 菲律宾 </ TD ></ TR >
</ TBODY >
</ TABLE >

第三种：

 

< SCRIPT  language =JavaScript >
function  Cbg(obj, objColor)
{
obj.style.backgroundColor = objColor
}
</ SCRIPT >
< table  width ="50%"  cellSpacing =0  cellPadding =0  width =200  border =1 >
< tr  onmouseover ="Cbg(this, '66ff99')"  onmouseout ="Cbg(this, 'ffffff')" >
< td  height ="20" > 表格变色 </ td >
< td  height ="20" > 表格变色 </ td >
</ tr >
< tr  onmouseover ="Cbg(this, 'ff9966')"  onmouseout ="Cbg(this, 'ffffff')" >
< td  height ="20" > 表格变色 </ td >
< td  height ="20" > 表格变色 </ td >
</ tr >
</ table >