鼠标滑过table时修改表格行的背景颜色

方法一：

#customers tr:hover
{ 
    background-color: #f00;  
}

方法二：

<tr onmouseover="style.backgroundColor='#FF9900'" onmouseout="style.backgroundColor='#FFFFFF'">  
    <td>Apple</td>  
    <td>Steven Jobs</td>  
    <td>USA</td>  
</tr>

完整样例：

 1 <html>  
 2 <head>  
 3 <style type="text/css">  
 4     #customers  
 5       {  
 6           font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;  
 7           width:100%;  
 8           border-collapse:collapse;  
 9       }  
10       
11     #customers td, #customers th   
12       {  
13           font-size:1em;  
14           border:1px solid #98bf21;  
15           padding:3px 7px 2px 7px;  
16       }  
17       
18     #customers th   
19       {  
20           font-size:1.1em;  
21           text-align:left;  
22           padding-top:5px;  
23           padding-bottom:4px;  
24           background-color:#A7C942;  
25           color:#ffffff;  
26       } 
27         #customers tr:hover
28         { /*方法一*/
29             background-color: #f00;  
30         }
31 </style>  
32 </head>  
33   
34 <body>  
35     <table id="customers">  
36         <tr>  
37             <th>Company</th>  
38             <th>Contact</th>  
39             <th>Country</th>  
40         </tr>  
41           
42           <!-- 方法二的使用 -->
43         <tr onmouseover="style.backgroundColor='#FF9900'" onmouseout="style.backgroundColor='#FFFFFF'">  
44             <td>Apple</td>  
45             <td>Steven Jobs</td>  
46             <td>USA</td>  
47         </tr>  
48           
49         <tr class="alt">  <!-- 方法一的使用 -->
50             <td>Baidu</td>  
51             <td>Li YanHong</td>  
52             <td>China</td>  
53         </tr>  
54           
55         <tr onmouseover="style.backgroundColor='#FF9900'" onmouseout="style.backgroundColor='#FFFFFF'">  
56             <td>Google</td>  
57             <td>Larry Page</td>  
58             <td>USA</td>  
59         </tr>  
60           
61         <tr class="alt" onmouseover="style.backgroundColor='#FF9900'" onmouseout="style.backgroundColor='#FFFFFF'">  
62             <td>Lenovo</td>  
63             <td>Liu Chuanzhi</td>  
64             <td>China</td>  
65         </tr>  
66           
67         <tr onmouseover="style.backgroundColor='#FF9900'" onmouseout="style.backgroundColor='#FFFFFF'">  
68             <td>Microsoft</td>  
69             <td>Bill Gates</td>  
70             <td>USA</td>  
71         </tr>  
72           
73         <tr class="alt" onmouseover="style.backgroundColor='#FF9900'" onmouseout="style.backgroundColor='#FFFFFF'">  
74             <td>Nokia</td>  
75             <td>Stephen Elop</td>  
76             <td>Finland</td>  
77         </tr>
78     </table>  
79 </body>  
80 </html>

View Code

参考：https://blog.csdn.net/jxq0816/article/details/49885095

https://blog.csdn.net/SJF0115/article/details/7594912

方法三：

通过css和js代码如下

 1 <style type="text/css">
 2     .datatable tr:hover,.datatable tr.hilite
 3     {
 4     background-color:#99FF66;
 5     color:#0000CC;
 6     }
 7 </style>
 8 <script type="text/javascript">
 9     var rows = document.getElementsByTagName('tr');//取得行
10     for(var i=0 ;i<rows.length; i++)
11     {
12         rows[i].onmouseover = function(){//鼠标移上去,添加一个类'hilite'
13             this.className += 'hilite';
14         }
15         rows[i].onmouseout = function(){//鼠标移开,改变该类的名称
16             this.className = this.className.replace('hilite','');
17         }
18     }
19 </script>

完整参考代码

HTML：

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>突出表格中鼠标指定的行</title>
 6 <link rel="stylesheet" type="text/css" href="突出表格中鼠标指定的行.css" />
 7 <style type="text/css">
 8     .datatable tr:hover,.datatable tr.hilite
 9     {
10     background-color:#99FF66;
11     color:#0000CC;
12     }
13 </style>
14 <script type="text/javascript">
15     var rows = document.getElementsByTagName('tr');//取得行
16     for(var i=0 ;i<rows.length; i++)
17     {
18         rows[i].onmouseover = function(){//鼠标移上去,添加一个类'hilite'
19             this.className += 'hilite';
20         }
21         rows[i].onmouseout = function(){//鼠标移开,改变该类的名称
22             this.className = this.className.replace('hilite','');
23         }
24     }
25 </script>
26 </head>
27 
28 <body>
29     <table class="datatable" summary="test">
30         <caption>Student List</caption>
31         <tr>
32             <th>Student Name</th>
33             <th>Date of Birth</th>
34             <th>Class</th>
35             <th>ID</th>
36         </tr>
37         <tr>
38             <td>Joe Bloggs</td>
39             <td>27/02/1993</td>
40             <td>Mrs Jones</td>
41             <td>12009</td>
42         </tr>
43         <tr>
44             <td>William Smith</td>
45             <td>04/03/1992</td>
46             <td>Mrs Jones</td>
47             <td>12010</td>
48         </tr>
49         <tr>
50             <td>William Smith</td>
51             <td>04/03/1992</td>
52             <td>Mrs Jones</td>
53             <td>12010</td>
54         </tr>
55         <tr>
56             <td>William Smith</td>
57             <td>04/03/1992</td>
58             <td>Mrs Jones</td>
59             <td>12010</td>
60         </tr>
61     </table>
62 </body>
63 </html>

View Code

css：

 1 @charset "utf-8";
 2 /* CSS Document */
 3 .datatable
 4 {
 5     border-collapse:collapse;
 6     color:#000000;
 7     font-family:Arial, Helvetica, sans-serif;
 8     border:1px solid #000099;
 9     font-size:14px;
10 }
11 .datatable th,.datatable td
12 {
13     text-align:left;
14     border:1px solid #000000;
15     padding-left:4px;
16     padding-top:5px;
17     padding-bottom:5px;
18     padding-left:4px;
19     padding-right:4px;
20 }
21 .datatable th
22 {
23     color:#000066;
24     font-family:宋体,Arial, Helvetica, sans-serif;
25     background-color:#CCCCCC;
26 }
27 .datatable caption
28 {
29     border:solid #000000 1px;
30     background-color:#CCFF66;
31     padding:5px 0 5px 0;
32 }

View Code

参考来源：https://www.cnblogs.com/KeenLeung/archive/2013/03/10/2952752.html