title: Bootstrap Tabs - How get rid of the 'active mouseout' style
body: <p>Bootstrap Tabs, I can't figure out the active state or find its selector, it seems like there are two active states. One when it's selected, and two when you mouseout of the selected tab.  I've searched StackOverflow but can't find or figure out what's going on here.</p>
  
  <p><a href="http://plnkr.co/edit/Wt3labEqfnNGSSkXJmKM?p=preview" rel="nofollow">See this plunker</a>, when you select one of the circles and then take your mouse off it, you see a white square behind the circle.</p>
  
  <p>Here's the css:</p>
  
  <pre><code>.nav-tabs &gt; li.active .services-icon-holder {
      background-color: #000;
  }
  
  .nav-tabs &gt; li.active .services-icon-holder &gt; .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 &gt; li {
  }
  
  
  
  .nav-tabs &gt; .active {
        border: 0px solid #000000;  
        background: transparent;
        color: #fff !important;
  }
  
  .nav-tabs &gt; li &gt; 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 &gt; li &gt; 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 &gt; li.active {
          z-index: 10px;
  
  }
  
  .nav-tabs &gt; li.active &gt; a,
  .nav-tabs &gt; li.active &gt; 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 &gt; li.active &gt; 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.
  }
  </code></pre>
  
  <p>Here's the html:
      
        </p>
  
  <pre><code>      &lt;tabset&gt;
  
             &lt;tab ng-repeat="tab in tabs" heading="{{tab.title}}" active="tab.active"&gt;
            &lt;span class="tabText"&gt;{{tab.content}}&lt;/span&gt;&lt;/br&gt;&lt;/br&gt;
            &lt;li class="tabText" ng-repeat="item in tab.list"&gt;
              &lt;span class="tabText" ng-bind-html="item"&gt;&lt;/span&gt;
            &lt;/li&gt;
  
          &lt;/tab&gt;
  
        &lt;/tabset&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p></p>