引导表悬停不起作用答案

【问题标题】：bootstrap table-hover is not working引导表悬停不起作用
【发布时间】：2015-08-05 08:10:27
【问题描述】：

我正在使用引导程序 3.3.4，但遇到了问题。如果我检查我正在加载的 bootstrap.css 文件，有一个 table-hover 类，但我不能使用它，它只是不起作用，正如我所看到的，例如表边框的工作。我检查了 bootstrap.js 是否也已加载。其他人有同样的问题吗？我试图搜索它这么久。提前致谢

【问题讨论】：

您能否解释一下您要实现的功能。您是否检查过引导文档是否存在这种行为。另外，请使用您尝试过的一些代码更新您的帖子。
你能发布你的 HTML 吗？根据文档，您需要将 table-hover 类添加到 table 元素，并确保您也有 <tbody>，因为它针对 tbody 元素内的行。

标签： javascript jquery html css twitter-bootstrap

【解决方案1】：

从docs on table hover，确保将.table-hover 类添加到您的表格元素中。

此外，正如 Daniel 指出的那样，bootstrap 会寻找一个 tbody 来对您的行进行分组，因为它不想在标题区域应用悬停样式。

此外，对于某些屏幕，默认悬停颜色可能会显得非常暗淡，因此您可以尝试使用以下代码使其更暗：

.table-hover > tbody > tr:hover {
  background-color: #D2D2D2;
}

这是 Stack Snippets 中的工作演示

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>


<table class="table table-hover">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

【讨论】：

【解决方案2】：

在 tbody 列中使用 th 而不是 td。这就是我让它工作的方式。使用 boostrap 4.1。

【讨论】：