鼠标滑过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>
参考：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>
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 }
参考来源：https://www.cnblogs.com/KeenLeung/archive/2013/03/10/2952752.html
