twitter-bootstrap 从引导表悬停类中删除 th 的悬停
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/39759711/
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
removing the hover of th from bootstrap table hover class
提问by Jc John
all i want is to remove this <th></th>hover element. I am using a bootstrap table class table hover and works fine but all i want is to remove the hover in table headers. I tried such many css like this . I am using Bootstrap v3.3.7 (http://getbootstrap.com)
我只想删除这个<th></th>悬停元素。我正在使用引导表类表悬停并且工作正常,但我想要的是删除表标题中的悬停。我尝试了很多这样的 css。我正在使用 Bootstrap v3.3.7 ( http://getbootstrap.com)
.table th:hover {
background-color: none !important;
}
also this
还有这个
.table tbody tr:hover th {
background-color: transparent;
}
and etc.
等等。
.table tbody tr:hover th {
background-color: transparent;
}
回答by DavidG
From the documentation, Bootstrap only applies a hover effect on table rows if the table has the table-hoverclass, for example:
从文档中,如果表具有table-hover类,Bootstrap 仅对表行应用悬停效果,例如:
<table class="table table-hover">
....
</table>
So you just need to remove that class. If you are not able to do that, then you could override with some CSS like this:
所以你只需要删除那个类。如果您无法做到这一点,那么您可以使用一些 CSS 进行覆盖,如下所示:
.table-hover>tbody>tr:hover {
background-color: #ffffff; /* Assuming you want the hover color to be white */
}
Note that any rows in the header do nothave a hover style applied, but you need to ensure your table looks like this:
请注意,标题中的任何行都没有应用悬停样式,但您需要确保您的表格如下所示:
<table class="table table-hover">
<thead>
<tr><th>head cell</th></tr>
</thead>
<tbody>
<tr><td>body cell</td></tr>
</tbody>
</table>
If your header rows are not at the top of the table, you could also override them with a special class:
如果您的标题行不在表格顶部,您还可以使用特殊类覆盖它们:
.table-hover>tbody>tr.no-hover:hover {
background-color: #ffffff;
}
And example of usage:
和用法示例:
<table class="table table-hover">
<tr><td>body cell</td></tr>
<tr class="no-hover"><th>head cell</th></tr>
<tr><td>body cell</td></tr>
</table>
回答by Guruling Kumbhar
to remove the
<th></th>hover, put the Header <tr>inside the <thead>tag. And other <tr>'s inside the <tbody>.
要删除
<th></th>悬停,请将标题<tr>放在<thead>标签内。和其他<tr>的在里面<tbody>。
Try this -
试试这个 -
<table class="table table-bordered table-hover">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>[email protected]</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>[email protected]</td>
</tr>
</tbody>
</table>
回答by Malachi
.table-hover thead tr th:hover, .table-hover thead tr:hover th, .table-hover thead tr:hover td, .table-hover thead tr td:hover
{
background-color: none !important;
}

