html - 如何在 Bootstrap 中悬停时设置 td 颜色？

Question

默认情况下，Twitter Bootstrap 类 .table-hover 中的表格使用样式:

.table-hover > tbody > tr:hover {
  background-color: #f5f5f5;
}

是否可以这样做:

.table-hover > tbody > tr:hover > td:first-child {
    background-color: inherit !important;
}

只有 tr 的第一个 td 不会在 hover 上改变？

Answer 1

问题是 Bootstraps 为 tr 的背景着色.为了覆盖它，您需要为 td 着色与页面的背景颜色。

.table-hover > tbody > tr:hover td:first-child {
    background-color: #fff;
}

使用透明背景是行不通的，因为 tr 的背景色位于其下方。

DEMO .

你可以使用 nth-child选择器，选择行中的所有单元格，但第一个:

.table-hover > tbody > tr:hover td:nth-child(n+2) {
  background-color: #f5f5f5;
}

<罢工> DEMO