Change hover color on nav-tabs

Question

I want to change text color of hover nav-tabs, so I named : nav nav-tabs custom, so code in my view looks like this:

      <li class="active"><%= link_to "Overview", '#'  %>           
      </li>
      <li><%= link_to "About",    '#' %></li>
      <li><%= link_to "What we do", '#' %></li>
      <li><%= link_to "Partners", '#' %></li>
      <li><%= link_to "Contact", '#' %></li>
      <li><%= link_to "Support", '#' %></li>
    </ul>

and code in my custom.css.scss

.custom a:hover {color: black;}

and it doesn't work. Can someone help me ?

Answer 1

You need to make your selector a little bit more specific to properly target your tabs. Try this:

.custom > li > a:hover {
    color: black;
}

By the way, this only changes the color of the text, if you want to change the background color of the tabs upon hover switch that color property to background-color.

Answer 2

Andres is right about the specificity. The style you want to override is set with:

.nav-bar > li > a:hover

If you're using LESS with Twitter Bootstrap there are variables already made for this:

@navbarLinkColor
@navbarLinkColorHover
@navbarLinkColorActive

See the Navbar section of the docs.