3

El siguiente es mi código:

<nav class="navbar navbar-default navbar-inverse " >
  <div id="navigation">
    <ul class="nav nav-pills">
       <li role="presentation" class="active"><a href="index.html"><h4> INICIO</h4></a></li>
       <li role="presentation" class="active"><a href="pacas.html"><h4> VENTA DE ROPA EN PACAS</h4></a></li>
       <li role="presentation" class="active"><a href="varon.html"><h4> VENTA DE ROPA PARA VARON</h4></a></li>
       <li role="presentation" class="active"><a href="dama.html"><h4> VENTA DE ROPA PARA DAMA</h4></a></li>
       <li role="presentation" class="active"><a href="nino.html"><h4>VENTA DE ROPA PARA NIÑO</h4></a></li>
   </ul>
 </div>
</nav>

Necesito cambiar el color del elemento al hacer hover sobre el, ya que se muestra gris, como se puede ver en la imagen debajo. Me gustaría poder manipular los colores del hover desde el CSS:

introducir la descripción de la imagen aquí

3 respuestas 3

5

Me hubiese gustado que hayas publicado el código CSS así hubiera encontrado el problema mucho más rápido.

Pero siempre puedes manipular el código desde la herramienta del navegador ir jugando con estas herramientas que ayudan mucho.

Ya te han mencionado de que si existe una regla como está !important por más maravilla que se haga jamás tomará efecto los estilos normales, ese atributo es darle mucha más autoridad, que a los estilos normales.

Los siguientes selectores universales > *, automáticamente añaden el color al siguiente elemento adyacente o a todo lo que esté englobado dentro del li es decir alude a todos los elementos que están contenidos dentro de otro.

/*Ejemplo 1 */
ul.nav.nav-pills li > * {
  color: #82a1ad;
}

ul.nav.nav-pills li > * :hover {
  color: #47abd2;
}

ul.nav.nav-pills li > * :focus {
  color: #227190;
}

/* Ejemplo 2 
ul.nav.nav-pills li a h4 {
  color: #82a1ad;
}

ul.nav.nav-pills li a h4:hover {
  color: #47abd2;
}

ul.nav.nav-pills li a h4:focus {
  color: #227190;
}
*/
<nav class="navbar navbar-default navbar-inverse " >
  <div id="navigation">
    <ul class="nav nav-pills">
       <li role="presentation" class="active"><a href="#"><h4> INICIO</h4></a></li>
       <li role="presentation" class="active"><a href="#"><h4> VENTA DE ROPA EN PACAS</h4></a></li>
       <li role="presentation" class="active"><a href="#"><h4> VENTA DE ROPA PARA VARON</h4></a></li>
       <li role="presentation" class="active"><a href="#"><h4> VENTA DE ROPA PARA DAMA</h4></a></li>
       <li role="presentation" class="active"><a href="#"><h4>VENTA DE ROPA PARA NIÑO</h4></a></li>
   </ul>
 </div>
</nav>

0
1

El navegador selecciona el CSS que mayor cantidad de coincidencias tenga con el elemento en cuestion, por lo tanto la regla CSS que mejor describa la estructura del HTML es la que sera utilizada.

nav.navbar-default > ul.nav > li.active > a:hover, nav.navbar-default > ul.nav > li.active > a:focus {
    background-color: red;
    color: white;
}

Nótese que los dos selectores imitan la estructura del HTML que usaste en el ejemplo.

Es importante mencionar que si estas utilizando !important en alguna parte, ninguna otra regla podrá ganarle a este modificador. Por lo tanto deberás verificar que la clase active que estas usando en en los <li> no establezca el color de fondo utilizando !important.

Por ultimo, si esta regla no funciona, te recomiendo que utilizes el inspector de CSS (F12) para ver que regla esta siendo seleccionada, verificar que no use !important y entonces crear una mas especifica.

CONSEJO: Nunca uses !important salvo que falte una hora para hacer una demo. Es una señal de un mal diseño en la estructura de tus CSS(s) y tiene varias desventajas ya que ninguna otra regla puede ganarle (excepto que también use !important) ni puede modificarse la propiedad CSS usando el atributo style de html, lo cual interfiere las librerías javascript que usan esta propiedad para hacer su magia.

2
  • intente a:hover {background-color: yellow;} pero me lo añadio a un slider no al navbar. El otro codigo: nav.navbar-default > ul.nav > li.active > a:hover, nav.navbar-default > ul.nav > li.active > a:focus { background-color: red; color: white; } No me funciono Commented el 13 abr. 2016 a las 17:06
  • @AlejandroRuiz te fijaste que regla esta usando via Inspeccionar Elemento y si active tiene !important? Commented el 13 abr. 2016 a las 17:10
0

Puede que estes apuntando al elemento a y por eso no te agarre los cambios y en realidad el texto lo tienes en el h4 espero ayudarte saludos

nav ul li a h4:hover {
  color: rgb(252, 50, 50);
}
<nav class="navbar navbar-default navbar-inverse " >
  <div id="navigation">
    <ul class="nav nav-pills">
       <li role="presentation" class="active"><a href="index.html"><h4> INICIO</h4></a></li>
       <li role="presentation" class="active"><a href="pacas.html"><h4> VENTA DE ROPA EN PACAS</h4></a></li>
       <li role="presentation" class="active"><a href="varon.html"><h4> VENTA DE ROPA PARA VARON</h4></a></li>
       <li role="presentation" class="active"><a href="dama.html"><h4> VENTA DE ROPA PARA DAMA</h4></a></li>
       <li role="presentation" class="active"><a href="nino.html"><h4>VENTA DE ROPA PARA NIÑO</h4></a></li>
   </ul>
 </div>
</nav>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.