javascript - Bootstrap 表悬停不起作用

Question

我正在使用 bootstrap 3.3.4，但遇到了问题。如果我检查我正在加载的 bootstrap.css 文件，有一个 table-hover 类，但我不能使用它，它只是不起作用，正如我所看到的，例如 table-bordered 是有效的。我检查过 bootstrap.js 也已加载。其他人有同样的问题吗？我试图搜索它很长时间。提前致谢

Answer 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>