twitter bootstrap - ver - Cambiar el color de desplazamiento en las pestañas de navegación

como cambiar el color de la barra del navegador

Question

Quiero cambiar el color del texto de las pestañas de navegación del hover, así que nombré: nav nav-tabs personalizado, por lo que el código en mi vista se ve así:

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

y codigo en mi custom.css.scss

.custom a:hover {color: black;}

y no funciona. Alguien me puede ayudar ?

Answer 1

Andrés tiene razón sobre la especificidad. El estilo que desea anular se establece con:

.nav-bar > li > a:hover

Si está utilizando LESS con Twitter Bootstrap, ya hay variables creadas para esto:

@navbarLinkColor
@navbarLinkColorHover
@navbarLinkColorActive

Vea la sección de la Navbar de Navbar de los documentos.

Answer 2

Debe hacer que su selector sea un poco más específico para apuntar correctamente a sus pestañas. Prueba esto:

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

Por cierto, esto solo cambia el color del texto, si desea cambiar el color de fondo de las pestañas al colocar el mouse sobre esa propiedad de color a color de background-color .

Answer 3

Establecer @navbarLinkBackgroundHover

Answer 4

Esto funciona para mí sin mucha "especificidad" aparte del Bootstrap predeterminado ...

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