title: Tabs background and font color change when click
body: <p>I have a tabbed pane in my HTML page. The following changes has to done in the task.</p>
  
  <ol>
  <li><p>When select a tab or hover, background - white, text color - #6baed9, border - 1px same color as text.</p></li>
  <li><p>When tab is unselected (if selected the another tab this become unselected one) - background - #6baed9, text color - white,  border - 1px same color as text.</p></li>
  </ol>
  
  <p>My CSS are as following,</p>
  
  <pre><code>#my_settings ul.tab li a {
      display: inline-block;
      text-align: center;
      padding: 8px 12px;
      text-decoration: none;
      transition: 0.3s;
      font-size: 17px;
      height:35px;
      width:250px;
      color: #6baed9;
  }
  
  #my_settings ul.tab li a:hover {
      background-color: #fff;
      color: #6baed9;
      border: 1px solid #6baed9
  }
  
  #my_settings ul.tab li a:focus, .active {
      background-color: #fff;
      color: #6baed9;
      border: 1px solid #6baed9
  }
  </code></pre>
  
  <p>Issues I have :</p>
  
  <ol>
  <li><p>In this when is case 2 above, I cant get the white text color when tab is not selected.</p></li>
  <li><p>The border of the selected tab is fine but the bottom line is not showing.Why is that.</p></li>
  </ol>
  
  <p>Please help me to do this.</p>
  
  <p><strong>PS : When I try to change <code>#my_settings ul.tab li a {</code> to <code>color : #fff</code>, works fine. But when I click somewhere in the page the selected tab's color(#6baed9) trun to white.</strong></p>