在WEB應用中，為了方便使用者查看錶格，將滑鼠移至上方的表格行改變樣式，如改變底色，會給使用者很好的體驗，特別是表格比較寬的時候，不會看串列。
原來為了實現這個功能，我的辦法是用js捕獲滑鼠事件來完成：
<table>
<tr onmouseover="this.style.background='#c0c0c0'" onmouseout="this.style.background='#ffffff'">
<td>1</td><td>表格內容</td>
</tr>
<tr onmouseover="this.style.background='#c0c0c0'" onmouseout="this.style.background='#ffffff'">
<td>2</td><td>表格內容</td>
</tr>
</table>
今天在看Dave Crane的《Ajax in Action》附帶的樣本時，發現有 span:hover 這樣的CSS 選取器，原來一直以為 hover 是應用在連結TAG上的，沒想到還可以這樣用。進一部聯想如果是這樣的話，表格行的懸停是否可以呢？經過實驗，答案是肯定的。IE和Firefox均支援這樣的用法。
<!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" />
<head>
<title>新的表格行懸停方法</title>
<style type="text/css">
tr:hover{background:#FFCC00;cursor: hand;}
</style>
</head>
<body>
<table>
<tr>
<td>1</td><td>表格內容</td>
</tr>
<tr>
<td>2</td><td>表格內容</td>
</tr>
</table>
</body>
</html>
這個方法可以使代碼簡潔不少。不僅僅是tr標籤可以這樣使用，其他如div,img,span等都可以，進一步的聯想就留給大家吧。
順便說下，還可以利用CSS選取器對數值進行判斷以用不同的樣式顯示出來，比如出現負數就紅字等。具體的文檔大家可以參看W3C網站。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
