悬停突出显示在 Bootstrap 4 中不起作用的表格

Hover highlight for tables not working in Bootstrap 4

我正在按照示例 Bootstrap's site 进行操作,当我添加 class table[=21 时,我发现 table 看起来不同=] 到我的 table 标签,但是当我添加 table-hover 时没有任何新的事情发生。因此,以下两行都产生相同的 L&F(none 其中突出显示了我悬停在上方的行)。

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

我可以缺少什么?

控制台中没有报告任何错误,它在链接到的页面上绝对有效,在谷歌搜索时我看不到任何信息。我依赖缩小的文件(所有四个 CSS 和一个 JS 加上 Tether)。

table-hover 的 CSS 是

.table-hover tbody tr:hover {
   ...some change
}

确保您的 HTML 有一个 tbody 标签:

<table class="table table-hover">
  <tbody>
    <tr>
      <td></td>
    </tr>
  </tbody>
</table>

如果您的 table 有一个 header,也可以考虑添加一个 thead。请注意 .table-hover 不会定位 thead.

中的行

如果您想在不更改标记的情况下影响悬停时的行,您可以尝试添加:

.table-hover tr:hover {
   ...some change
}