Siéntete en la libertad de compartir nuestra web y códigos en tus redes sociales, ayúdanos a aumentar nuestra comunidad.
Solución:
Finalmente con experimentos encontré como capturarlo.
#top-menu .current a
color: orange !important;
Gracias a todos por su tiempo y ayuda. ¡Muy apreciado!
Para hacer lo que estás tratando de hacer, primero debes entender a: hover debe ven luego un enlace y a: visitado en la definición de CSS para ser efectivo. Si no están en este orden, no funcionarán.
En segundo lugar, debe comprender que si pensaba (a: activo) se refería al color del enlace actual en el que se encontraba el usuario final, esto es incorrecto. (a:activo) cambia el color cuando haces clic en el enlace. Puede probar esto manteniendo presionado el botón del mouse en el enlace que hizo de un color diferente con (a: active).
Finalmente, si está tratando de hacer esto usando solo CSS, debe agregar una clase específica en el enlace actual en el que se encuentra el usuario final. A continuación te dejé un ejemplo, espero que esto ayude 🙂
Su barra de navegación de la siguiente manera
-Casa
-Rusia
-Italia
Estamos en la página de Italia para este ejemplo:
/*YOUR CSS SHOULD LOOK LIKE THIS*/
/* unvisited link grey */
#top-menu a:link
color: #777;
/* visited link grey */
#top-menu a:visited
color: #777;
/* mouse over link blue */
#top-menu a:hover
color: #0CF;
/* selected link blue */
#top-menu a:active
color: #0CF;
/* !IMPORTANT ONLY ADD THIS CLASS TO YOUR ACTIVE PAGE LINK ( Color Blue )*/
.activePage a
color: #0CF !important
¿Notó que no puse la etiqueta .activePage en los otros enlaces? Lo que esto hace es permitir que los colores originales que elija en su css para su barra de navegación sigan teniendo lugar mientras la página que está activa permanece sólida con un color diferente.
La razón por la que esto funcionó es porque agregué !importante al final del color para esa clase separada.
.activePage
color: #0CF !important
Entonces, para aplicar esta misma técnica a sus otras páginas, simplemente se vería así:
Página de inicio
/*YOUR CSS SHOULD LOOK LIKE THIS*/
/* unvisited link grey */
#top-menu a:link
color: #777;
/* visited link grey */
#top-menu a:visited
color: #777;
/* mouse over link blue */
#top-menu a:hover
color: #0CF;
/* selected link blue */
#top-menu a:active
color: #0CF;
/* !IMPORTANT ONLY ADD THIS CLASS TO YOUR ACTIVE PAGE LINK ( Color Blue )*/
.activePage a
color: #0CF !important
Espero haberle dado una respuesta sólida a su pregunta porque odio cuando busco en la web y realmente no puedo encontrar la respuesta que busco.
Te sugiero que crees un ID (#) selector localmente para el Div que contiene el a enlaces, luego toma eso id nombre en su hoja de estilo y anule la regla existente.
Por ejemplo,
#abc axxx:xxx;
#abc a:activexxx:xxx;
Espero que esto ayude.
Recuerda que puedes dar difusión a este escrito si te valió la pena.