Question

我尝试使用我自己的CSS使用Bootstrap标签，除了一个我无法弄清楚的小错误之外，它大部分都运行良好。每当我点击一个标签然后停止悬停在它上面（但不点击任何其他内容）它将在该标签上显示原始的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＆gt; li.active＆gt; a，.nav-tabs＆gt; li.active＆gt; a：hover，.nav-tabs＆gt; li.active＆gt; a：focus。

所以......试试

.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

不悬停时无法删除引导标签css？

1 个答案: