在WEB应用中,为了方便用户查看表格,将鼠标悬停的表格行改变样式,如改变底色,会给用户很好的体验,特别是表格比较宽的时候,不会看串行。
原来为了实现这个功能,我的办法是用js捕获鼠标事件来完成:
<table>
<tr οnmοuseοver="this.style.background='#c0c0c0'" οnmοuseοut="this.style.background='#ffffff'">
<td>1</td><td>表格内容</td>
</tr>
<tr οnmοuseοver="this.style.background='#c0c0c0'" οnmοuseοut="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网站。