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

2,538 阅读1分钟

在表格中的记录上,当鼠标移动上去时对应的部分能够换个颜色的话,那就会显得很有动感,并且有高亮显示的功能。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;

}