Bootstrap 表格 .table-hover 颜色自定义

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

悬停高亮的实现方式是在tr的hover事件中,设置tr元素内所有的td和th的背景色为新背景色。同样,如果需要更换颜色,需要对它进行重载覆盖设置。如下所示:

// 源码1468行

.table-hover > tbody > tr:hover > td,

.table-hover > tbody > tr:hover > th {

background-color: #f5f5f5;

}

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 表格是Bootstrap的一个基础组件之一,Bootstrap为表格提供了一种基础样式和4种附加样式以及1个支持响...
    Mandy_jin阅读 4,090评论 0 1
  • Bootstrap是什么? 一套易用、优雅、灵活、可扩展的前端工具集--BootStrap。GitHub上介绍 的...
    凛0_0阅读 13,728评论 3 184
  • 一、数据准备 二、操作 //1.鼠标移动行变色 $("#table1 tr").hover(function(){...
    橙月兔兔阅读 6,223评论 0 51
  • 读《50 Models for Strategic Thinking》系列分享之二 这本小册子是在去年6月份达拉斯...
    tester晓梅阅读 3,584评论 0 2
  • 今天是在家的最后一天,所以决定去我们那的寺庙拜佛,在家早上四点多出发到达目的地以是下午两点多,很累全程在车上睡着过...
    W万玛阅读 1,378评论 0 0