未悬停时无法删除 bootstrap 选项卡 css？

Question

我正在尝试将 Bootstrap 选项卡与我自己的 CSS 一起使用，除了一个我无法弄清楚的小错误外，它基本上运行良好。每当我单击一个选项卡然后停止将鼠标悬停在它上面（但不单击任何其他内容）时，它将在该选项卡上显示原始的 css 选项卡背景。我已经尝试更改每个元素的背景/边框，但似乎没有什么可以阻止这种情况的发生。 Screenshots of the problem can be found here（我的代表还不够高，无法嵌入图像！）。另一个需要注意的是，这个问题不会出现在 Safari 中。

这是我的 Html 和 Css:

CSS:

.postTeamBytes {
    background-color: #EDF6F9;
    margin-bottom: 10px;
    border-style: solid;
    border-width: 1px;
    border-color: #777;
    border-radius: 1px;
}

.postTeamBytes .nav li {
    height: 50px;
    margin-left: 10px;
    display: inline;
    padding-top: 10px;
    padding-left: 10px;
    padding-right: 10px;
}

.postTeamBytes .nav li:hover{
    border: none;
}

.postTeamBytes .nav li:active{
    border: none;
}

.postTeamBytes .nav {
    border: none;
}

.postTeamBytes .nav:hover {
    border: none;
}

.postTeamBytes .nav:active {
    border: none;
}

.postTeamBytes .nav .active a {
    margin-top: -10px;

    font-family: 'Lato', sans-serif;
    font-size: 15px;
    color: #333;
    font-weight: 300;
    height: 50px;
    outline: 0;
}

.postTeamBytes .nav li a {
    margin-top: -5px;

    font-family: 'Lato', sans-serif;
    font-size: 15px;
    color: #333;
    font-weight: 300;
    height: 50px;
}

.postTeamBytes .nav .active {
    background-color: #EDF6F9;
    height: 40px;
    margin-top: 5px;
}

.nav-tabs {
    background: none;
}

.nav-tabs > li > a:hover{
    border: none;
    background: none;
}

.postTeamBytes .nav a {
    background: none;
    border: none;
    color: #333;
}

.postTeamBytes .nav a:hover {
    background: none;
    border: none;
    color: #FFF;
}

.postTeamBytes .nav .active a {
    background: none;
    border: none;
    color: #52ABC6;
}

.postTeamBytes .nav .active a:hover {
    background: none;
    border: none;
    color: #52ABC6;
}

.postTeamBytes .nav .active a:active:hover {
    background: none;
    border: none;
    color: #52ABC6;
}

.postTeamBytes .nav {
    height: 50px;
    background-color: #A8D5E2;
 }

.postTeamBytes .nav-tabs {
    height: 50px;
    border: none;
}


HTML:

<div class="postTeamBytes">
            <ul class="nav nav-tabs">
                <li class="active"><a data-toggle="tab" href="#byteTab">BYTE</a></li>
                <li><a data-toggle="tab" href="#eventTab">EVENT</a></li>
                <li><a data-toggle="tab" href="#challengeTab">CHALLENGE</a></li>
            </ul>
</div>

谢谢！

Answer 1

您需要更改的属性是 .nav-tabs>li.active>a, .nav-tabs>li.active>a:hover, .nav-tabs>li.active >a：专注。

所以...尝试

.nav-tabs>li.active>a, .nav-tabs>li.active>a:hover, .nav-tabs>li.active>a:focus.
{
  background-color:transparent !important;
  border: none !important;
  // whatever else you need to style
}

去看看我的bootply

未悬停时无法删除 bootstrap 选项卡 css？

Cannot remove bootstrap tabs css when not hovering?

css

tabs

twitter-bootstrap