请选择 进入手机版 | 继续访问电脑版
贠老师培训群:150322713    贠老师QQ:767708506

贠老师office培训-excel学习网

 找回密码
 立即注册
点击咨询贠老师
查看: 532|回复: 11

[css] 实现表格行鼠标滑过高亮显示的css样式

[复制链接]

607

主题

604

帖子

1909

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
1909
发表于 2016-2-4 14:36:14 | 显示全部楼层 |阅读模式
先来张图,看图先

表格行鼠标滑过高亮显示

表格行鼠标滑过高亮显示

请实现移到交易内容区域时,高亮当前行背景的效果。

1、建立一分标准的HTML文档结构

谈到标准HTML结构,有人可能会说,嗯,用div标签,里面再多套些li,最后用css来个float也就能排成这样的结构了。其实真正标准的结构并不是说一定要用div来布局,而是要尽量使用语义化的HTML标签。在HTML标签的定义中div与span其实是两个没有语义的标签,table则有数据表的语义。

所以这里我们来建一张符合XHTML 1.0 Strict标准的文档结构试试。以下为该表结构的HTML代码:

其中需要注意的是:

你需要使用<thead />、<tbody />、<tfoot />等标签,分别对应的含义是表头区域,表主体内容,表底部区域。

表头区域的单元格你应该使用<th />而非<td />

<tfoot />标签块应该在<thead />与<tbody />之间,否则无法通过W3C标签验证

再给它们加上样式:

.tableList {
border:2px #666 solid;
}
.tableList td, .tableList th {
border:1px #666 solid;
padding:5px 25px;
}
.tableList tfoot td {
text-align:right;
}
.fastpayIcon {
background:transparent url() no-repeat scroll 5px 5px;
}

2、实现表格行滑过高亮背景效果

现在我们要实现表格行滑过高亮效果,怎么办?是的,用JS来几个onmouseover和onmouseout就搞定了。不过,如果要符合WEB标准的话,其实我们更应该使用CSS的hover伪类来实现。我们在<style />部分再加上这条CSS规则试试:

.tableList tbody tr {
background:#fff;
}
.tableList tbody tr:hover {
background:#eee;
}

这样大部分标准浏览器都能够实现这种效果了,接下来再考虑兼容性问题,为IE6写上一段JS来实现这个效果吧

<!--[endif]-->

这里要注意的是:

使用IE条件注释<!–[if lt IE 7]>来确保这段JS只会在IE7以下版本的IE浏览器中运行,因为对于大部分浏览器来说这段JS代码是画蛇添足的。

3、代码兼容性测试

接下来我们来在各个浏览器中测试下这段代码的兼容性。测试各个版本IE兼容性建议使用IETester,然后是FF2/FF3。

测试发现,在IE6和IE7中第一个有背景图片的单元格无法实现该效果,IE8和FF则没有此问题。经过分析原因在于

.fastpayIcon {
background:transparent url() no-repeat scroll 5px 5px;
}

该段CSS定义等价于:

.fastpayIcon{
background-attachment: scroll;
background-color: transparent;
background-image: url();
background-repeat: no-repeat;
background-position: 5px 5px;
}

因为其中定义了background-color: transparent;虽然定义了透明,但是调试中发现IE对于td的background-color支持有BUG,当设置为transparent时,其实实现的是#fff的效果。解决方法就是删掉对td的background-color定义,或者将属性值设置为 inherit,这样td就会从它的父元素tr中继承这一属性,从而实现效果。

想要了解更多更全面的web前段知识,css样式,html教程,数据库教程,word教程,excel教程等等,就到excel学习网www.excelxue.com


回复

使用道具 举报

7

主题

1067

帖子

65

积分

注册会员

Rank: 2

积分
65
发表于 2016-3-24 09:15:11 | 显示全部楼层
很不错的帖子,又学到了,力挺
回复 支持 反对

使用道具 举报

4

主题

1280

帖子

195

积分

注册会员

Rank: 2

积分
195
发表于 2016-3-26 14:04:22 | 显示全部楼层
先收藏再学习,谢谢啦!
回复 支持 反对

使用道具 举报

2

主题

1138

帖子

87

积分

注册会员

Rank: 2

积分
87
发表于 2016-3-30 14:02:03 | 显示全部楼层
一下子解决了我工作当中的难题,谢谢楼主,非常感谢!
回复 支持 反对

使用道具 举报

0

主题

1098

帖子

54

积分

注册会员

Rank: 2

积分
54
发表于 2016-3-31 12:32:25 | 显示全部楼层
先收藏再学习,谢谢啦!
回复 支持 反对

使用道具 举报

1

主题

345

帖子

364

积分

中级会员

Rank: 3Rank: 3

积分
364
QQ
发表于 2016-4-2 09:51:25 | 显示全部楼层
赞一个
回复 支持 反对

使用道具 举报

2

主题

1274

帖子

156

积分

注册会员

Rank: 2

积分
156
发表于 2016-11-23 21:49:21 | 显示全部楼层
有些不是太明白,研究研究再说
回复 支持 反对

使用道具 举报

1

主题

1099

帖子

7

积分

注册会员

Rank: 2

积分
7
发表于 2017-4-7 15:52:41 | 显示全部楼层
好东西一定要看看!
回复 支持 反对

使用道具 举报

1

主题

1099

帖子

7

积分

注册会员

Rank: 2

积分
7
发表于 2018-2-25 22:15:21 | 显示全部楼层
顶顶
回复 支持 反对

使用道具 举报

0

主题

1111

帖子

6

积分

注册会员

Rank: 2

积分
6
发表于 2018-5-10 20:13:52 | 显示全部楼层
先收藏再学习,谢谢啦!
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则



陕ICP备15003731号  

贠老师培训 GMT+8, 2019-6-18 14:47 , Processed in 0.228962 second(s), 31 queries .

快速回复 返回顶部 返回列表