方法一:
#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>