CSS样式实现表格行鼠标滑过高亮表现
发布时间：2018-08-18 08:52:25 所属栏目：创业 来源：站长网
导读：【猛火建站学院文档】CSS教程，直入正题，此刻有这么一个表格： 请实现鼠标移到买卖营业内容地区时，高亮当前行配景的结果。 1、成立一分尺度的HTML文档布局 谈到尺度HTML布局，有人也许会说，嗯，用div标签，内里再多套些li，最后用css来个float也就能排成这样
【猛火建站学院文档】CSS教程，直入正题，此刻有这么一个表格：  请实现鼠标移到买卖营业内容地区时，高亮当前行配景的结果。 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(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]--> 这里要留意的是： 行使IE前提注释＜!–[if lt IE 7]>来确保这段JS只会在IE7以下版本的IE赏识器中运行，由于对付大部门赏识器来嗣魅这段JS代码是多此一举的。 3、代码兼容性测试 接下来我们来在各个赏识器中测试下这段代码的兼容性。测试各个版本IE兼容性提议行使IETester，然后是FF2/FF3。 测试发明，在IE6和IE7中第一个有配景图片的单位格无法实现该结果，IE8和FF则没有此题目。颠末说明缘故起因在于 .fastpayIcon { background:transparent url(http://img.alipay.com/pimg/icon_fastpay16.gif) no-repeat scroll 5px 5px; } 该段CSS界说等价于： .fastpayIcon{ background-attachment: scroll; background-color: transparent; background-image: url(http://img.alipay.com/pimg/icon_fastpay16.gif); background-repeat: no-repeat; background-position: 5px 5px; } 由于个中界说了background-color: transparent;固然界说了透明，可是调试中发明IE对付td的background-color支持有BUG，当配置为transparent时，着实实现的是#fff的结果。办理要领就是删掉对td的background-color界说，可能将属性值配置为 inherit，这样td就会从它的父元素tr中担任这一属性，从而实现结果。 （编辑：河北网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
