Change hover color on nav-tabs

Change hover color on nav-tabs

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:

  • <%= link_to "Overview", '#' %>
  • <%= link_to "About", '#' %>
  • <%= link_to "What we do", '#' %>
  • <%= link_to "Partners", '#' %>
  • <%= link_to "Contact", '#' %>
  • <%= link_to "Support", '#' %>
  • and code in my custom.css.scss
    .custom a:hover {color: black;}

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


    Solution 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.

    Solution 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:


    See the Navbar section of the docs.

    Related:  How do I implement charts in Bootstrap?

    Solution 3:

    This works for me without much “specificity” other than the default Bootstrap…

    ul.nav > li > a:hover {
    	background-color: #000000;
    	color: #FFFFFF;
    	border-style: none;

    Solution 4:

    Set @navbarLinkBackgroundHover