Bootstrap Tabs - 如何摆脱'active mouseout'风格

Question

引导选项卡，我无法弄清楚活动状态或找到它的选择器，似乎有两个活动状态。一个当它被选中时，两个当你将鼠标悬停在选定的选项卡上时。我搜索了 StackOverflow，但找不到或弄清楚这里发生了什么。

See this plunker，当您选择其中一个圆圈然后将鼠标移开时，您会看到圆圈后面有一个白色方块。

这是css：

.nav-tabs > li.active .services-icon-holder {
    background-color: #000;
}

.nav-tabs > li.active .services-icon-holder > .services-icon {
    color: #f0f;
} 

.nav-tabs {
        border-bottom: 0px solid #dddddd;
        font-size: 34px; 
        text-align: center;
        border: 0px solid #000000; 
        background-color: transparent; 
        padding: 0px 0px 0px 60px; 
}

.nav-tabs > li {
}



.nav-tabs > .active {
      border: 0px solid #000000;  
      background: transparent;
      color: #fff !important;
}

.nav-tabs > li > a {
        width:53px;
        height:53px;
        color:#FFFFFF;
        background-image: url("http://i.imgur.com/HQoX5Eh.png");
        background-position: top center;
        background-repeat: no-repeat;
        background-size: 53px 53px; 
        border: 0px solid #000000;     
        padding: 3px 0px 0px 0px; 
        margin-left: 54px;
        background-color: transparent; 
}

.nav-tabs > li > a:hover {
        width:53px;
        height:53px;
        color:#FFFFFF;
        background-image: url("http://i.imgur.com/5tXUkLT.png");
        background-position: top center;
        background-repeat: no-repeat;
        background-size: 53px 53px; 
        border: 0px solid #000000;     
        padding: 3px 0px 0px 0px; 
        margin-left: 54px;
        background-color: transparent; 
         z-index: 10px;
}

.nav-tabs > li.active {
        z-index: 10px;

}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover {
        width:53px;
        height:53px;
        color:#FFFFFF;
        background-image: url("http://i.imgur.com/5tXUkLT.png");
        background-position: top center;
        background-repeat: no-repeat;
        background-size: 53px 53px; 
        border: 0px solid #000000;
        background-color: transparent; 
        z-index: 10px;
}
.nav-tabs > li.active > a {
        width:53px;
        height:53px;
        color:#FFFFFF;
        background-image: url("http://i.imgur.com/5tXUkLT.png");
        background-position: top center;
        background-repeat: no-repeat;
        background-size: 53px 53px; 
        border: 0px solid #000000;  
        background-color: transparent;
         z-index: 10px;
}
.tab-pane{
    border-radius: 0;
    padding: 20px;
    color: #FFFFFF;
}
.active { color: #ffffff!important; //for navbar, not tabs.
}

.active2 { 
  color: #000000!important; //for the tabs.
}

这里是html：

      <tabset>

           <tab ng-repeat="tab in tabs" heading="{{tab.title}}" active="tab.active">
          <span class="tabText">{{tab.content}}</span></br></br>
          <li class="tabText" ng-repeat="item in tab.list">
            <span class="tabText" ng-bind-html="item"></span>
          </li>

        </tab>

      </tabset>
  </div>

Answer 1

尝试完全覆盖引导程序分配的内容。

.nav-tabs > li.active > a, 
.nav-tabs > li.active > a:hover, 
.nav-tabs > li.active > a:focus{
  background-color:transparent;
  border:0;
  /*Apply your actual overriding rules here and ignore the prev ones that was only for the demo*/
}

Plnkr

基本上在您的特定情况下，您的规则会被引导程序通过 .nav-tabs > li.active > a:focus 在锚上分配的 :focus 规则覆盖

使用浏览器控制台（例如：chrome）检查分配给元素的样式，您将很好地了解将哪个规则应用于元素。