Bootstrap 选项卡 - 如何摆脱“活动鼠标悬停”样式

Question

Bootstrap Tabs，我无法弄清楚活动状态或找到它的选择器，似乎有两个活动状态。当您选择它时，会出现一个；当您将鼠标移出所选选项卡时，会出现两个。我搜索了 StackOverflow，但无法找到或弄清楚这里发生了什么。

看看这个小工具，当您选择其中一个圆圈并将鼠标从其上移开时，您会看到圆圈后面有一个白色方块。

这是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*/
}

普林克尔

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

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