CSS实现网页表格行鼠标滑过高亮显示

直入正题，现在有这么一个表格：

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

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

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

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

其中需要注意的是：

1. 你需要使用<thead />、<tbody />、<tfoot />等标签，分别对应的含义是表头区域，表主体内容，表底部区域。
2. 表头区域的单元格你应该使用<th />而非<td />
3. <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(http://img.alipay.com/pimg/icon_fastpay16.gif) 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]--&

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!