bootstrap table-hover不起作用

Question

我正在使用bootstrap 3.3.4,我有一个问题.如果我检查我正在加载的bootstrap.css文件,有一个表悬停类,但我不能使用它,它只是不起作用,因为我可以看到,以表格为边界的例如可行.我已经检查过bootstrap.js也被加载了.有没有其他人有同样的问题？我试着搜索了这么久.提前致谢

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>