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

Question

我跟随示例Bootstrap's site，我发现当我将类 table 添加到我的表标签时，表格看起来有所不同，但没有什么新的进展当我添加 table-hover 时。因此，以下两行都生成相同的L＆amp; F（没有一个突出显示我悬停在上面的行）。

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

我能错过什么？

控制台中没有报告错误，它在链接到的页面上肯定有效，在goolearching时我看不到任何信息。我依赖于缩小的文件（所有四个CSS和一个JS加上Tether）。

Answer 1

表格悬停的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
}