利用 CSS selector 改变悬停表格样式
在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网站。
转载于:https://www.cnblogs.com/hsxixi/archive/2008/11/22/1339144.html
利用 CSS selector 改变悬停表格样式相关推荐
- CSS设置下划线对齐方式,如何巧妙利用CSS自定义网页下划线样式
如何巧妙利用CSS自定义网页下划线样式 CSS为网页设计者们提供了丰富而灵活的页面元素表现形式的控制手段.但是,或许你可能注意到了,对于下划线,CSS提供的可选操作却不是很多.一般情况下,人们看到的下 ...
- php画梯形,利用css来画出各种样式不同的梯形,html中梯形外框怎么做
利用css来画出各种样式不同的梯形利用钢性铸铁来画出各种样式不同的梯形, 首先我们要知道一下四个非常重要的样式: (学习视频分享:css视频教程 border-buttom:设置下边框 border- ...
- html实现游戏鼠标样式,巧妙运用CSS立刻改变鼠标的样式
巧妙运用CSS立刻改变鼠标的样式 互联网 发布时间:2008-10-17 19:27:05 作者:佚名 我要评论 用惯了Windows的人对各种各样的鼠标样式一定不会陌生.当鼠标移动到不同 ...
- php优秀表格样式,用html和css代码实现各种表格样式的总结
在我们日常开发工作中,基本上都会有表格的设置,我们都知道表格是展示数据的重要形式,也是网页中非常重要的元素之一,他可以使数据以表格的形式展现在网页中,今天我们就给大家总结一下表格样式! html实现表 ...
- 利用css对input[type=file] 样式进行美化，input上传按钮美化
2019独角兽企业重金招聘Python工程师标准>>> <input type="file" name="fileUpload"/> ...
- 利用CSS动画制作 Html 表格数据滚动显示
直接上图看最终实现效果: DataV里有这个效果,看起来高大上,实际自己开发也不难实现.实现的方法很多,下面是本人的一种实现方案,分享给大家. 这个效果需要解决2个问题: 1:首尾的数据衔接: 2:c ...
- PHP定义梯形,利用css来画出各种样式不同的梯形
首先我们要知道一下四个非常重要的样式: (学习视频分享:css视频教程) border-buttom:设置下边框 border-top: border-left: border-right: { he ...
- css浮动改变鼠标箭头样式
默认箭头样式 cursor:default 系统默认箭头样式 手型 cursor: pointer 手型 手型 cursor:hand 手型 移动十字箭头 cursor: move 移动十字箭头 帮助 ...
- CSS（4）表格样式
表格边框 表格边框 使用 border 属性为表格添加边框,border属性值可以按顺序设置的属性为:border-width.border-style和border-color. th, td {b ...
最新文章
- SQL中distinct的用法（四种示例分析）
- python抖音批量点赞_python抖音三百条，悠悠一笑乐逍遥
- push and pop
- 详细解析Java中抽象类和接口的区别
- 视频转码能力哪家强？腾讯云、阿里云、七牛云多维度对比
- ML之NN：利用神经网络的BP算法解决XOR类(异或非)问题(BP solve XOR Problem)
- dell r740如何做raid_戴尔入门级4K、IPS广色域显示器：S2721QS表现如何？
- boost::minimum_degree_ordering用法的测试程序
- 只有一个显示器但是显示两个显示器_小米34寸曲面显示器深度体验 办公体验极佳 但是还有个大弱点...
- Maven学习总结（28）——Maven+Nexus+Myeclipse集成
- SAP License：ABC作业成本法－平行记帐
- openerp 常见问题 OpenERP在哪储存附件？（转载）
- fenby C语言 P11
- Unity AssetBundle加载的理解
- 【计算机系统基础】- 袁春风
- 自定义快捷键整理 - Windows
- 数据库设计----概念结构设计（概念模型、E—R模型、概念结构设计）
- java代码实现kafka消费端consumer的from-beginning功能
- Unity 引擎 Managed Stripping Level 遇到的坑
- 穹顶之下-善恶是非谁来负责