有些時候鼠標移動到一些地方，該地方會相應的做出一些變化。我們在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>
表格原來為灰色
鼠標移動過去后，表格變為白色
