Question

我想要的是删除此<th></th>悬停元素。我使用bootstrap表类表悬停并工作正常，但我想要的是删除表头中的悬停。我试过这么多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;
}

Answer 1

从the documentation开始，如果表具有SELECT t1.* FROM tags t1 LEFT JOIN tags t2 ON t1.id = t2.related WHERE t1.name LIKE %:str% OR t2.name LIKE %:str%;类，则Bootstrap仅对表行应用悬停效果，例如：

table-hover

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

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

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

.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;
}

Answer 2

删除 <th></th> 悬停，将标题<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>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>

Answer 3

.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;   
}

从bootstrap表悬停类中删除hover

3 个答案: