方法一:

#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

相关文章: