Bootstrap 4中表格的悬停高亮效果无法正常工作

Question

4

我遵循Bootstrap官网上的示例，发现当我在表格标签中添加table类时，表格的外观会有所不同，但是当我添加table-hover类时，没有任何新的效果。因此，下面两行代码都产生相同的外观（没有突出显示我悬停的行）。

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

我可能错过了什么？

控制台没有报告错误，在链接页面上肯定可以正常运行，当使用谷歌搜索时也没有看到任何有用的信息。我依靠被压缩的文件（四个CSS和一个JS加上Tether）。

- Konrad Viltersten

1

你的表格有 tbody 标签吗？ - sol

它有 table、tr、th 和 td。我以为 tbody 是它们的组合... 你是说我需要明确添加 tbody 吗？！ - Konrad Viltersten

1

是的。正在通过以下方式定位行：.table-hover tbody tr:hover。如果没有tbody标签，就不会有任何行被定位。您可以在HTML标记中添加tbody，或者只需更改css为.table-hover tr:hover。不过我建议选择第一种选项。 - sol

对于阅读这篇答案的其他人，如果你在<tr>标签上使用style=""设置背景颜色，则鼠标悬停效果将无法实现。这就是我遇到的问题。 - Dan Chase

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- sol · Accepted Answer

悬停表格的CSS样式为

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

请确保您的HTML中有标签：

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

如果你的表格有标题，考虑包含一个 thead。请注意，.table-hover 不会针对 thead 中的行。

如果你想在鼠标悬停时影响行而不改变你的标记，可以尝试添加：

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