cambiar el color de cada enlace en una lista al pasar el cursor sobre uno

Aquí hay una lista de ejemplo:

<ul>
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Link 3</a></li>
</ul>

Y aquí están los estilos:

li a {
    color: #999;
}

li a:hover {
    color: #333;
}

En este momento, cada enlace es el # 999 y cuando un usuario pasa el mouse sobre cualquiera de ellos, el enlace individual se convierte en el # 333. Lo que estoy tratando de hacer es hacer que no solo el enlace sobre el que se coloca el cursor se convierta en el # 333, sino que también quisiera que los otros enlaces de la lista se conviertan en #eee al mismo tiempo. ¿Cómo puedo hacer esto?

preguntado el 30 de enero de 12 a las 19:01

Lo más probable es que necesite javascript o jquery para esto. Sin embargo, puede salirse con la suya colocándolos todos dentro de un div y proporcionando un CSS hover clase para el div. Echa un vistazo aquí: stackoverflow.com/questions/676324 -

ul:hover a { color: #333 } ¿en lugar de? -

en realidad, los navegadores modernos admiten :hover en elementos que no sean de anclaje. no necesitas JS para esto. si pasa el cursor sobre un elemento secundario cuando su elemento primario tiene el estilo :hover, es como si el evento "burbujeara", por lo que colocar al niño sobre un niño es como hacer que el padre esté suspendido. -

2 Respuestas

¿A: se desplazaría sobre todo <ul> trabajar en tu instancia?

ul:hover li a{
    color: #eee
}

Debido a las reglas de especificidad, también necesitaría cambiar su a:hover regla:

ul li a:hover {
    color: #333;
}

Aquí hay un ejemplo: http://jsfiddle.net/7NLt8/

Respondido el 31 de enero de 12 a las 00:01

esto funciona para hacer que todos los demás enlaces sean más ligeros, pero el enlace sobre el que se desplaza también se vuelve más ligero - user1115666

De hecho, terminé agregando un flotador a la lista para que el elemento no abarque la página, pero esto definitivamente funciona. - Charles Sprayberry

@ user1115666 También debe cambiar sus reglas existentes porque son menos específicas (no incluyen ul) - David

¿No cambiaría esto el color cuando estás cerca el texto, pero en realidad no se cierne sobre el texto. Por ejemplo, si se encuentra dentro de las dimensiones del elemento de bloque ul, pero en realidad no se desplaza sobre el texto. - Andrew Rasmussen

No puede hacer esto solo con CSS. Vas a tener que usar solo JavaScript. Cree un controlador de eventos para cuando se pasa el cursor sobre uno de esos enlaces. Seleccione / suscriba todos esos anclajes a ese controlador de eventos. Luego, la función real seleccionará todos esos anclajes y modificará el color. También deberá manejar el caso cuando el mouse del usuario se mueva y ya no esté suspendido (querrá establecer el color de nuevo al original / predeterminado, y este probablemente será otro controlador de eventos).

Editar: para que puedas hacer lo que David sugirió. Sin embargo, usar el desplazamiento sobre el elemento ul hará que el color del texto cambie siempre que el mouse esté dentro de las dimensiones del elemento ul, que es muy probable que sea diferente de cuando se desplaza sobre el texto. Por ejemplo, si codifica una página simple con dos elementos de lista dentro de una , y una en cada , verá que el color cambia cuando se desplaza sobre el texto, pero también verá que el tamaño del abarca el ancho de toda la página, por lo que los colores también cambiarán cuando ni siquiera estés colocando el cursor sobre el texto. Supongo que este es un comportamiento no deseado y un limpiador La solución se puede hacer usando JavaScript.

Respondido el 31 de enero de 12 a las 00:01

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.