读书频道 > web开发 > 其他综合 > 深入理解Bootstrap
3.4.4 鼠标悬停高亮的表格
2014-05-08 16:22:55     我来说两句 
收藏    我要投稿   

本文所属图书 > 深入理解Bootstrap

本书是目前Bootstrap领域技术版本最新、内容最全面、介绍最详细、实战性最强、最具深度的著作。它是资深Web技术专家多年工作经验的结晶,不仅授人以鱼,全面讲解了Bootstrap各个功能组件的使用方法,以及对现有插  立即去当当网订购

在表格中的记录上,当鼠标移动上去时对应的部分能够换个颜色的话,那就会显得很有动感,并且有高亮显示的功能。Bootstrap当然也不会错过这个亮点,其提供了一个.table-hover样式。在Bootstrap下的使用方式如下:
<table class="table table-hover">
    ...
</table>

悬停高亮的实现方式是在tr的hover事件中,设置tr元素内所有的td和th的背景色为新背景色。同样,如果需要更换颜色,需要对它进行重载覆盖设置。如下所示:
// 源码1468行
.table-hover > tbody > tr:hover > td,
.table-hover > tbody > tr:hover > th {
  background-color: #f5f5f5;
}

点击复制链接 与好友分享!回本站首页
分享到: 更多
您对本文章有什么意见或着疑问吗?请到论坛讨论您的关注和建议是我们前行的参考和动力  
上一篇:3.4.3 带边框的表格
下一篇:3.4.5 紧凑型表格
相关文章
图文推荐
3.2 Windows 7设置
3.1 DNS解析
2.3 HTTP协议
2.2 TCP/IP协议与So
排行
热门
文章
下载
读书

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训
版权所有: 红黑联盟--致力于做最好的IT技术学习网站