Css 删除Twitter引导表中单个单元格的表悬停效果

我正在使用Twitter引导开发一个web应用程序。在我们的一个视图中，有一个表使用了

.table hover

类。但是，表中有一些特定的单元格，我不想在其其余行高亮显示时高亮显示。我应该使用什么样式规则来实现这种效果

这大致是我的视图表的组织方式：

<table class="table table-hover">
    <thead>
        <tr>
            <th />
            <th>Header 1</th>
            <th>Header 2</th>
            <th>Header 3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td rowspan="2">Row Group "Heading" 1</td>
            <td>Content</td>
            <td>Content</td>
            <td>Content</td>
        </tr>
        <tr>
            <td>Content</td>
            <td>Content</td>
            <td>Content</td>
        </tr>
        <tr>
            <td rowspan="2">Row Group "Heading" 2</td>
            <td>Content</td>
            <td>Content</td>
            <td>Content</td>
        </tr>
        <tr>
            <td>Content</td>
            <td>Content</td>
            <td>Content</td>
        </tr>
    </tbody>
</table>

---

不幸的是，它不起作用。我想这可能是因为整行被高亮显示，而不仅仅是单元格…

我不确定使用什么方法来创建这些“悬停”，但是如果你分开这些单元格，你可以为悬停添加特定的规则。因此，给这些单元格一个类名，然后您就可以为它们设置特定的样式/悬停

这就是引导CSS的外观：

.table-hover { 
             tbody { tr:hover td, tr:hover th 
                             { background-color: @tableBackgroundHover; } 
                        }
           }

通过一点JQuery：

  $('td[rowspan]').addClass('hasRowSpan');

然后可以使用以下CSS覆盖它：

tbody tr:hover td.hasRowSpan { 
          background-color: none;   /* or whatever color you want */
} 

---

我会在元素中添加一个不需要悬停的类，例如：

<tr>
  <td rowspan="2" class="no-hover">Row Group "Heading" 2</td>
  <td>Content</td>
  <td>Content</td>
  <td>Content</td>
</tr>

---

在bootstrap4中工作。

这相当于

tbody-tr:hover-td[rowspan]

并且jQuery不是必需的

<tr>
  <td rowspan="2" class="no-hover">Row Group "Heading" 2</td>
  <td>Content</td>
  <td>Content</td>
  <td>Content</td>
</tr>

.table-hover {
  .no-hover {
    background-color: transparent !important;
  }
}