這份教程將教會(huì)你下面的技巧：當(dāng)鼠標(biāo)移至表格（單元格）上方時(shí)，改變表格的背景顏色。
首先，在你的頁(yè)面上創(chuàng)建一個(gè)菜單；然后，創(chuàng)建兩種用于鑒別的顏色體：一個(gè)是表格的初始顏色，另一個(gè)是鼠標(biāo)移至表格上方時(shí)所產(chǎn)生的背景顏色。在我這個(gè)案例中，我所默認(rèn)使用的背景效果顏色（鼠標(biāo)以上去時(shí)）是：#999999，初始顏色是：#CCCCCC。
現(xiàn)在，將下面這段代碼復(fù)制到文檔頭部。（位于<HEAD></HEAD>標(biāo)簽之間）
<style type="text/css">
td.off {
background: #CCCCCC;
}
td.on{
background: #999999;
}
</style>將藍(lán)色改變?yōu)槟闼枰念伾?br>
td.
off意指表格的初始顏色，這里設(shè)置的初始值是#CCCCCC。
td.
on意指鼠標(biāo)移動(dòng)至表格上方時(shí)顯示的顏色，這里設(shè)置的值是深灰色（#CCCCCC）。
現(xiàn)在，我們需要做的是將這段CSS代碼應(yīng)用到已經(jīng)創(chuàng)建的表格中。將下面這段代碼插到表格中的每個(gè)<td>標(biāo)簽中。
class="off" onmouseover="this.className='on'" onmouseout="this.className='off'"加入后的代碼如下所示：
<td class="off" onmouseover="this.className='on'" onmouseout="this.className='off'">MENU 1</td>
讓我們逐行理解下面的這段代碼：
<td class="off" —— 為表格中的每列單元格所對(duì)應(yīng)的CSS的off類(lèi)賦值，它的意思是：表格每列單元格的初始顏色是：#CCCCCC。
onmouseover="this.className='on'" ——當(dāng)鼠標(biāo)移至表格中的每列單元格之上時(shí)，所對(duì)應(yīng)的CSS的效果。
onmouseout="this.className='off'"> ——當(dāng)鼠標(biāo)從表格中的每列單元格上移開(kāi)時(shí)，所對(duì)應(yīng)的CSS的效果。
上圖示例所對(duì)應(yīng)的全部代碼如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Table Background Change</title>
<style type="text/css">
td.off {
background: #CCCCCC;
}
td.on {
background: #999999;
}
</style>
</head>
<body>
<table width="150" cellpadding="3">
<tr>
<td class="off" onmouseover="this.className='on'"
onmouseout="this.className='off'"><font color="#000000" size="1">Menu
1 </font></td>
</tr>
<tr>
<td class="off" onmouseover="this.className='on'"
onmouseout="this.className='off'"><font color="#000000" size="1">Menu
2 </font></td>
</tr>
<tr>
<td class="off" onmouseover="this.className='on'"
onmouseout="this.className='off'"><font color="#000000" size="1">Menu
3</font></td>
</tr>
<tr>
<td class="off" onmouseover="this.className='on'"
onmouseout="this.className='off'"><font color="#000000" size="1">Menu
4 </font></td>
</tr>
</table>
</body>
</html>
