Bootstrap表格悬停未生效。

Question

我正在使用Bootstrap 3.3.4，并遇到了一个问题。 如果我检查正在加载的bootstrap.css文件，其中有一个table-hover类，但我无法使用它，似乎它不起作用。例如，我已确认table-bordered起作用。我还检查了bootstrap.js是否也被加载。是否有其他人遇到过同样的问题？我试图寻找答案很久了。 提前感谢您的帮助。

- Jakub Folejtar

---

请问您能解释一下您想要实现的功能吗？您是否查阅了 Bootstrap 的文档，以确定是否存在这样的行为？另外，请更新您的帖子，并附上您尝试过的一些代码。 - Jos

你可以发布你的HTML吗？根据文档，你需要在表格元素中添加“table-hover”类，并确保你有<tbody>，因为它会针对tbody元素内的行进行样式处理。 - Daniel Hutton

Answer 1

从表格悬停文档中，确保将.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>

- KyleMit

Answer 2

使用 th 而不是 td 来设置 tbody 的列。这就是我让它工作的方法。使用 Bootstrap 4.1。

- Oscar Valdez Esquea

---

请使用您的答案下面的编辑按钮，并添加一个示例以展示应该如何完成。这将有助于未来读者更好地理解您的答案并发现它有用。 - Saeed Zhiany