twitter-bootstrap 引导表悬停不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30411337/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
bootstrap table-hover is not working
提问by Jakub Folejtar
I am using bootstrap 3.3.4 and I have a problem. If I check the bootstrap.css file which I am loading, there is a table-hover class, but I can't use it, it just doesn't work, as I can see, table-bordered for example works. I have checked that the bootstrap.js is also loaded. Did anyone else have the same problem? I tried to search it for so long. Thanks in advance
我正在使用引导程序 3.3.4，但遇到了问题。如果我检查我正在加载的 bootstrap.css 文件，有一个 table-hover 类，但我不能使用它，它只是不起作用，正如我所看到的，例如 table-bordered 工作。我已经检查过 bootstrap.js 是否也已加载。有没有其他人有同样的问题？我试图搜索它这么久。提前致谢
回答by KyleMit
From the docs on table hover, make sure to add the .table-hoverclass to your table element.
从表格悬停的文档中，确保将.table-hover类添加到您的表格元素中。
Also, as Daniel pointed out, bootstrap looks for a tbody to group your rows because it doesn't want to apply hover styling on the header area.
此外，正如 Daniel 指出的那样，bootstrap 会寻找一个 tbody 来对您的行进行分组，因为它不想在标题区域应用悬停样式。
Also, for some screens, the default hover color can appear very dim so you can try making it darker with the following code:
此外，对于某些屏幕，默认的悬停颜色可能会显得非常暗，因此您可以尝试使用以下代码使其更暗：
.table-hover > tbody > tr:hover {
background-color: #D2D2D2;
}
Here's a working demo in Stack Snippets
这是 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>回答by Oscar Valdez Esquea
Use th instead of td for your tbody columns. That's how I got it working. Using boostrap 4.1.
对 tbody 列使用 th 而不是 td 。这就是我让它工作的方式。使用助推器 4.1。
