有些时候鼠标移动到一些地方，该地方会相应的做出一些变化。我们在CSS中可以使用hover来实现鼠标事件，但这仅限于鼠标移动到此元素上，元素做出的相应反应。与CSS不同的是，JavaScript为我们提供了一系列的鼠标监听事件。此案例将模拟鼠标经过表格一行时的变色功能。
代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>鼠标监听事件</title>
<script type="text/javascript">
//创建一个改变颜色的方法
function changeColor(obj,color){
obj.bgColor = color ;
}
</script>
</head>
<body>
<table border="1" cellpadding="5" cellspacing="0" bgcolor="F2F2F2">
<tr onmousemove="changeColor(this,'white')" onmouseout="changeColor(this,'F2F2F2')">
<td>部门编号</td>
<td>部门名称</td>
<td>部门位置</td>
</tr>
<tr onmousemove="changeColor(this,'white')" onmouseout="changeColor(this,'F2F2F2')">
<td>10</td>
<td>财务部</td>
<td>上海</td>
</tr>
<tr onmousemove="changeColor(this,'white')" onmouseout="changeColor(this,'F2F2F2')">
<td>20</td>
<td>技术部</td>
<td>成都</td>
</tr>
</table>
</body>
</html>
表格原来为灰色
鼠标移动过去后，表格变为白色
