## Cambiar el color del borde y del enlace al pasar el cursor
Si estás buscando una forma de cambiar el color del borde y del enlace al mismo tiempo cuando pasas el cursor por encima, has llegado al lugar indicado. En este artículo, te mostraré cómo puedes lograr este efecto utilizando CSS.
El problema que has mencionado es que al aplicar `border-bottom: 2px solid #000;` al elemento `` en el estado `:hover`, el color del enlace activo no cambia cuando pasas el cursor por encima.
Para solucionar este problema, puedes ajustar el orden de los selectores en tu código CSS para asegurarte de que el estilo del enlace activo se aplique después del estilo del enlace al pasar el cursor. Aquí tienes un ejemplo actualizado:
“`css
nav ul li a.active {
border-bottom: 2px solid red;
}
nav ul li a:hover {
color: #000;
border-bottom: 2px solid #000;
}
“`
Otra opción es reducir la especificidad del selector `nav ul li a.active` eliminando el elemento ``. Esto permitirá que el estilo del enlace activo se aplique correctamente. Aquí tienes un ejemplo:
“`css
nav ul li .active {
border-bottom: 2px solid red;
}
“`
Con estos ajustes, podrás lograr el efecto deseado de cambiar el color del borde y del enlace al mismo tiempo al pasar el cursor por encima.
No dudes en probar estos códigos en tu propio proyecto y adaptarlos a tus necesidades. Recuerda que el CSS es una poderosa herramienta para personalizar el diseño de tu sitio web y hacer que destaque.
Si tienes más preguntas o necesitas ayuda adicional, ¡estoy aquí para ayudarte!
Valoraciones
No hay valoraciones aún.