CSS實現表格行滑鼠滑過高亮顯示

直入正題，現在有這麼一個表格：

請實現移到交易內容地區時，高亮當前行背景的效果。

1、建立一分標準的HTML文檔結構

談到標準HTML結構，有人可能會說，嗯，用div標籤，裡面再多套些li，最後用css來個float也就能排成這樣的結構了。其實真正標準的結構並不是說一定要用div來布局，而是要盡量使用語義化的HTML標籤。在HTML標籤的定義中div與span其實是兩個沒有語義的標籤，table則有資料表的語義。

所以這裡我們來建一張符合XHTML 1.0 Strict標準的文檔結構試試。以下為該表結構的HTML代碼：

其中需要注意的是：

你需要使用＜thead />、＜tbody />、＜tfoot />等標籤，分別對應的含義是表頭地區，表主體內容，表底部地區。

表頭地區的儲存格你應該使用＜th />而非＜td />

＜tfoot />標籤塊應該在＜thead />與＜tbody />之間，否則無法通過W3C標籤驗證

再給它們加上樣式：

.tableList {
border:2px #666 solid;
}
.tableList td, .tableList th {
border:1px #666 solid;
padding:5px 25px;
}
.tableList tfoot td {
text-align:right;
}
.fastpayIcon {
background:transparent url(http://img.alipay.com/pimg/icon_fastpay16.gif) no-repeat scroll 5px 5px;
}