Question

我有一个使用class table-hover的表。我想使用不同的颜色来悬停和选择（通过点击）单元格。

此外，如果选定的单元格悬停，则应显示为所选单元格选择的颜色

我已将以下代码用于悬停颜色：

.table-hover > tbody > tr.bg-info:hover {
  background-color: #d9edf7;
}

但似乎指定的颜色用于悬停和选择单元格。

我非常喜欢引导程序。请有人帮我说明如何使用不同的颜色进行悬停和选择

Answer 1

在悬停时获取活动：

   <table>
        <tbody>
        <tr>
          <td class="bg-info">aaa</td>
          <td class="bg-info">bbb</td>
        </tr>
        </tbody>
        </table>

    .bg-info:hover {
      background-color: #d9edf7;
    }

请检查它是否适合您或您想要进行任何更改悬停： - fiddle

HTML： -

<table>
<tbody>
<tr>
  <td class="bg-info">aaa</td>
  <td class="bg-info">bbb</td>
</tr>
</tbody>
</table>

Jquery的： -

$(document).ready(function(){

$('.bg-info').click(function(){
$('.bg-info').removeClass('bgtd');
$(this).addClass('bgtd');
})

})

CSS： -

.bgtd{
  background-color:#ff0000;
}

要点击选中的td： - fiddle

，请获取背景颜色

Answer 2

默认的.active和:hover状态以及上下文变体可以从Bootstrap 3 CSS文件中的第2337行开始（如果我没有弄错的话）。

你会发现.table > thead > tr > td.active，其余的（下面）是其他背景变体（成功，信息等），那么这就是编辑背景颜色的正确位置。

默认.active州的CSS：

.table > thead > tr > td.active,
.table > tbody > tr > td.active,
.table > tfoot > tr > td.active,
.table > thead > tr > th.active,
.table > tbody > tr > th.active,
.table > tfoot > tr > th.active,
.table > thead > tr.active > td,
.table > tbody > tr.active > td,
.table > tfoot > tr.active > td,
.table > thead > tr.active > th,
.table > tbody > tr.active > th,
.table > tfoot > tr.active > th {
  background-color /* background color for default .active state */
}

默认.active:hover州的CSS：

.table-hover > tbody > tr > td.active:hover,
.table-hover > tbody > tr > th.active:hover,
.table-hover > tbody > tr.active:hover > td,
.table-hover > tbody > tr:hover > .active,
.table-hover > tbody > tr.active:hover > th {
  background-color /* background color for default .active:hover state */
}

您只需要将.active替换为上下文变体（成功，信息等）或您自己想要的变体，然后它就会变成类似.table > thead > tr > td.variant的内容。

或者，如果你知道如何使用Less，那么它会更容易因为它已经包含在他们的源代码中。该文件已命名在mixins文件夹中table-row.less。

更改悬停在Bootstrap中的表格和选择颜色？

2 个答案: