在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网站。