Hola,
¿cómo hago para que el botón que tengo seleccionado sea de un color diferente hasta que cambie de botón? He tratado con el active pero sólo me funciona como un hover mientras selecciono unos pocos segundos y se desvanece.
Gracias.
Respuestas
Efectivamente el pseudo-estado active no te va a servir porque sólo dura mientras el usuario está pinchando en ese elemento. Para poder sugerirte una buena solución, necesitaríamos ver el código HTML que utilizas en el menú y que nos explicaras con más detalle cómo se activa un elemento del menú o que tiene que hacer el usuario para activarlo.
@javiereguiluz
Solo tiene que entrar para activarlo y quiero que se distinga en cual estoy parada del resto por el color
ul.menu > li > a:active:before {
background-color: blue;
}
Gracias
@SAMMYVARGAS6
Suponiendo que tu código HTML sea el siguiente:
<ul class="menu"> <li><a href="#"> ... </a></li> <li><a href="#"> ... </a></li> <li><a href="#"> ... </a></li> <li><a href="#"> ... </a></li> </ul>
Entonces tienes al menos dos opciones de hacer lo que quieres. Si sólo hay que activar el menú cuando el usuario entra en una de sus opciones, entonces tienes que usar el hover en vez de el active:
ul li:hover a { background: red; }
Si lo que quieres es que el menú seleccione automáticamente el elemento activo según la página en la que se encuentre el usuario, entonces tendrás que añadir un id o un class al <body> de la página y hacer lo siguiente:
<body id="portada"> <ul class="menu"> <li><a href="#"> ... </a></li> <li><a href="#"> ... </a></li> <li><a href="#"> ... </a></li> <li><a href="#"> ... </a></li> </ul> </body>
body#portada ul.menu li:nth-child(1) a { background: red; }
Como tendrás que añadir id o class al <body> de cada sección, el selector CSS al final será algo como lo siguiente:
body#portada ul.menu li:nth-child(1) a, body#noticias ul.menu li:nth-child(2) a, body#productos ul.menu li:nth-child(3) a, body#contacto ul.menu li:nth-child(4) a { background: red; }
@javiereguiluz