从Bootstrap表格的hover类中移除th的悬停效果

Question

我想要的就是去除表头的悬停效果，我正在使用Bootstrap表格类table-hover，它可以正常工作，但我只想去掉表头的悬停效果。我尝试了很多像这样的CSS代码。我正在使用Bootstrap v3.3.7 (http://getbootstrap.com)。

.table th:hover {
     background-color: none !important;   
}

also this

   .table tbody tr:hover th {
  background-color: transparent;
}

以及等等。

.table tbody tr:hover th {
  background-color: transparent;
}

- Jc John

---

谢谢您的回答，先生。请阅读我的问题。我只想禁用表头中的悬停。 - Jc John

只是一句话：th是thead tr的子元素而不是tbody的 ;) - Leonard Lepadatu

Answer 1

根据文档，只有在表格具有table-hover类时，Bootstrap才会对表格行应用悬停效果，例如：

<table class="table table-hover">
    ....
</table>

所以你只需要删除那个类。如果你无法做到这一点，那么你可以使用下面的CSS覆盖：

.table-hover>tbody>tr:hover {
    background-color: #ffffff; /* Assuming you want the hover color to be white */
}

请注意，表头中的任何行都不会应用悬停样式，但您需要确保您的表格如下所示：

<table class="table table-hover">
    <thead>
        <tr><th>head cell</th></tr>
    </thead>
    <tbody>
        <tr><td>body cell</td></tr>
    </tbody>
</table>

如果您的表头行不在表格顶部，您也可以使用特殊类来覆盖它们：

如果您的表头不在表格顶部，您可以使用特殊类覆盖它们：

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

使用示例:

<table class="table table-hover">
    <tr><td>body cell</td></tr>
    <tr class="no-hover"><th>head cell</th></tr>
    <tr><td>body cell</td></tr>
</table>

- DavidG

---

感谢您的回答先生。我只想删除<th></th>中的悬停状态。 - Jc John

好的，我已经澄清了一些。请注意，鼠标悬停在 tr 上，而不是 th 或 td，因此您需要告诉表格哪些行是标题行。 - DavidG

Answer 2

要移除表头的hover效果，需要将表头<tr>放在<thead>标签内，其他行的<tr>则放在<tbody>标签内。

可以尝试以下代码 -

  <table class="table table-bordered table-hover">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>[e-mail]</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>[e-mail]</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>[e-mail]</td>
      </tr>
    </tbody>
  </table>

- Guruling Kumbhar

Answer 3

我认为“unset”值是您要寻找的内容。

将此添加到您的CSS中。如果可能，请避免使用“！important”。

.remove-table-hover tr:hover{
   background-color: unset !important;
}

然后在你的HTML中，将这个类添加到你的表格元素中。

<table class="table remove-table-hover">
...
</table>

- Thabo Moyo

Answer 4

我还没有测试过 Bootstrap 5 之前的任何其他版本。至于 Bootstrap 5，您可以直接使用

.table th:hover {
    box-shadow: none;
}

- Pimpfru

Answer 5

.table-hover thead tr th:hover, .table-hover thead tr:hover th, .table-hover thead tr:hover td, .table-hover thead tr td:hover
 {
    background-color: none !important;   
}

- Malachi

---

悬停效果使用 box-shadow。 - Pimpfru