方法一：
#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>
完整样例：
<html>
<head>
<style type="text/css">
#customers
{
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
width:100%;
border-collapse:collapse;
} #customers td, #customers th
{
font-size:1em;
border:1px solid #98bf21;
padding:3px 7px 2px 7px;
} #customers th
{
font-size:1.1em;
text-align:left;
padding-top:5px;
padding-bottom:4px;
background-color:#A7C942;
color:#ffffff;
}
#customers tr:hover
{ /*方法一*/
background-color: #f00;
}
</style>
</head> <body>
<table id="customers">
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr> <!-- 方法二的使用 -->
<tr onmouseover="style.backgroundColor='#FF9900'" onmouseout="style.backgroundColor='#FFFFFF'">
<td>Apple</td>
<td>Steven Jobs</td>
<td>USA</td>
</tr> <tr class="alt"> <!-- 方法一的使用 -->
<td>Baidu</td>
<td>Li YanHong</td>
<td>China</td>
</tr> <tr onmouseover="style.backgroundColor='#FF9900'" onmouseout="style.backgroundColor='#FFFFFF'">
<td>Google</td>
<td>Larry Page</td>
<td>USA</td>
</tr> <tr class="alt" onmouseover="style.backgroundColor='#FF9900'" onmouseout="style.backgroundColor='#FFFFFF'">
<td>Lenovo</td>
<td>Liu Chuanzhi</td>
<td>China</td>
</tr> <tr onmouseover="style.backgroundColor='#FF9900'" onmouseout="style.backgroundColor='#FFFFFF'">
<td>Microsoft</td>
<td>Bill Gates</td>
<td>USA</td>
</tr> <tr class="alt" onmouseover="style.backgroundColor='#FF9900'" onmouseout="style.backgroundColor='#FFFFFF'">
<td>Nokia</td>
<td>Stephen Elop</td>
<td>Finland</td>
</tr>
</table>
</body>
</html>
参考：https://blog.csdn.net/jxq0816/article/details/49885095
https://blog.csdn.net/SJF0115/article/details/7594912
方法三：
通过css和js代码如下
<style type="text/css">
.datatable tr:hover,.datatable tr.hilite
{
background-color:#99FF66;
color:#0000CC;
}
</style>
<script type="text/javascript">
var rows = document.getElementsByTagName('tr');//取得行
for(var i=0 ;i<rows.length; i++)
{
rows[i].onmouseover = function(){//鼠标移上去,添加一个类'hilite'
this.className += 'hilite';
}
rows[i].onmouseout = function(){//鼠标移开,改变该类的名称
this.className = this.className.replace('hilite','');
}
}
</script>
完整参考代码
HTML：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>突出表格中鼠标指定的行</title>
<link rel="stylesheet" type="text/css" href="突出表格中鼠标指定的行.css" />
<style type="text/css">
.datatable tr:hover,.datatable tr.hilite
{
background-color:#99FF66;
color:#0000CC;
}
</style>
<script type="text/javascript">
var rows = document.getElementsByTagName('tr');//取得行
for(var i=0 ;i<rows.length; i++)
{
rows[i].onmouseover = function(){//鼠标移上去,添加一个类'hilite'
this.className += 'hilite';
}
rows[i].onmouseout = function(){//鼠标移开,改变该类的名称
this.className = this.className.replace('hilite','');
}
}
</script>
</head> <body>
<table class="datatable" summary="test">
<caption>Student List</caption>
<tr>
<th>Student Name</th>
<th>Date of Birth</th>
<th>Class</th>
<th>ID</th>
</tr>
<tr>
<td>Joe Bloggs</td>
<td>27/02/1993</td>
<td>Mrs Jones</td>
<td>12009</td>
</tr>
<tr>
<td>William Smith</td>
<td>04/03/1992</td>
<td>Mrs Jones</td>
<td>12010</td>
</tr>
<tr>
<td>William Smith</td>
<td>04/03/1992</td>
<td>Mrs Jones</td>
<td>12010</td>
</tr>
<tr>
<td>William Smith</td>
<td>04/03/1992</td>
<td>Mrs Jones</td>
<td>12010</td>
</tr>
</table>
</body>
</html>
css：
@charset "utf-8";
/* CSS Document */
.datatable
{
border-collapse:collapse;
color:#000000;
font-family:Arial, Helvetica, sans-serif;
border:1px solid #000099;
font-size:14px;
}
.datatable th,.datatable td
{
text-align:left;
border:1px solid #000000;
padding-left:4px;
padding-top:5px;
padding-bottom:5px;
padding-left:4px;
padding-right:4px;
}
.datatable th
{
color:#000066;
font-family:宋体,Arial, Helvetica, sans-serif;
background-color:#CCCCCC;
}
.datatable caption
{
border:solid #000000 1px;
background-color:#CCFF66;
padding:5px 0 5px 0;
}
参考来源：https://www.cnblogs.com/KeenLeung/archive/2013/03/10/2952752.html