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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-22 00:19:09  来源:igfitidea点击:

removing the hover of th from bootstrap table hover class

htmlcsstwitter-bootstrap

提问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;   
}