利用 CSS selector 改变悬停表格样式
2008-11-22 22:12
183 查看
在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网站。
原来为了实现这个功能,我的办法是用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网站。
相关文章推荐
- 利用css的cursor属性改变鼠标的样式
- 使用CSS改变表格边框样式
- 使用css改变表格边框样式
- 用CSS改变表格边框样式,很实用的一种方法。[转]
- DHTML技术演示---动态设置表格行间隔显示、表格排序、鼠标悬停样式改变
- 使用CSS改变表格边框样式
- 利用CSS改变输入内容的样式及控件的外形
- 使用CSS改变表格边框样式
- jQuery 选择表格(table)里的行和列及改变简单样式
- 如何利用CSS给同一个网页中的超链接设置设置不同的样式?
- 使用jquey的css()方法改变样式,
- 利用css的border样式制作图形
- css改变滚动条的样式:
- 仿Word自动套用格式,用CSS设置表格样式
- 利用OpenXml SDK改变Excel样式(如单元格填充色)
- CSS控制输入框input悬停交互样式
- 动态改变控件的样式(Css)
- 用纯css改变下拉列表select框的默认样式(不兼容IE10以下)
- 用CSS和JavaScript改变样式的区别
- CSS控制表格文字样式的研究