从引导表悬停类中删除 th 的悬停答案

【问题标题】：removing the hover of th from bootstrap table hover class从引导表悬停类中删除 th 的悬停
【发布时间】：2021-10-08 20:47:18
【问题描述】：

我只想删除这个<th></th> 悬停元素。我正在使用引导表类表悬停并且工作正常，但我想要的只是删除表标题中的悬停。我尝试了很多这样的css。我正在使用 Bootstrap v3.3.7 (http://getbootstrap.com)

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

还有这个

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

等等

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

【问题讨论】：

比你的回答先生。请阅读我的问题。我只想禁用表头中的悬停
只是备注：th 是 thead tr 的 childdren 而不是 tbody ;)

标签： html css twitter-bootstrap

【解决方案1】：

从the documentation 开始，如果表格具有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>

【讨论】：

谢谢您的回答先生。我只想删除中的悬停
好的，我已经澄清了一些。请注意，悬停在tr，而不是th 或td，因此您需要告诉表格哪些行在标题中。

【解决方案2】：

删除 <th></th> 悬停，将标题<tr> 放在<thead> 标记内。以及<tbody> 中的其他<tr>。

试试这个 -

  <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>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
    </tbody>
  </table>

【讨论】：

【解决方案3】：

我没有测试任何其他 Bootstrap 5 之前的版本。至于 Bootstrap 5 你可以使用

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

【讨论】：

【解决方案4】：

我认为“未设置”值是您正在寻找的。p>

将此添加到您的 CSS 中。 '!important' 可能不是必需的，如果可以，请避免使用它。

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

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

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

【讨论】：

【解决方案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;   
}

【讨论】：

悬停效果使用box-shadow。