html - 表悬停突出显示在 Bootstrap 4 中不起作用

Question

我正在按照示例 Bootstrap's site当我将类 table 添加到我的表格标签时，我看到表格看起来不同，但是当我添加 table-hover 时，没有任何新变化。因此，以下两行都产生了相同的 L&F(它们都没有突出显示我悬停在上方的行)。

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

我可以缺少什么？

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

Answer 1

table-hover 的 CSS 是

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

确保您的 HTML 具有 tbody 标签:

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

如果您的表格有标题，也可以考虑包含一个 thead。请注意，.table-hover 不会定位 thead 中的行。

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

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