html - ¿Por qué la pseudoclase flotante anula la pseudoclase activa

css css-selectors

Question

El título básicamente lo dice todo.

Supongamos que tengo un elemento en el que quiero cambiar de color :hover , pero al hacer clic, quiero que vuelva a su color original. Así que, he intentado esto:

a:link, a:visited, a:active {
background: red;
}
a:hover {
background: green;
}

Como resultado, esto no funciona. Después de rascarse mucho la cabeza, me di cuenta de que el estado :hover estaba anulando el estado :active . Esto fue fácilmente resuelto por esto:

a:link, a:visited {
background: green;
}
a:hover {
background: red;
}
a:active {
background: green;
}

(Podría combinar la 1ª regla con la 3ª).

Aquí está el violín: http://jsfiddle.net/V5FUy/

Mi pregunta: ¿es este el comportamiento esperado? Hasta donde entiendo esto, el :active estado :active siempre debe anular el estado :hover , ya que el estado :active casi siempre estará acompañado del estado :hover .

Answer 1

Así es como funciona, y trataré de explicar por qué. Como sabemos, CSS continuará buscando el documento cuando aplique estilos y aplicará el estilo que sea más específico para el elemento.

Ejemplo:

li.betterList { better list styling here }

Es más específico y sobrescribirá.

li { list styling here }

Y estos selectores Puesdo se consideran todos de la misma especificidad y, por lo tanto, la última línea sobrescribirá a la anterior. Esto es confirmado por la nota en W3Schools

Nota:: activo DEBE venir después: ¡hover (si está presente) en la definición de CSS para que sea efectivo!

También puedes lanzar este CSS en tu jsfidle y verlo sobrescribir ya que son de la misma especificidad.

.works {background: red}
.works {background: green}

Answer 2

Creo que al menos debes considerar el flujo de la interacción del usuario en los enlaces (o botones) .

Generalmente,

1. :link siempre ha sido el valor predeterminado (sin tocar) ,
2. Luego, cuando un usuario apunta al botón, ahí es donde :hover entra en juego.
3. Una vez que un usuario apunta al enlace o botón, entonces él / ella hará clic, ahí es donde entra el :active .

Esa es la secuencia estándar de cómo interactuamos con los enlaces (o botones) . Con la excepción de :visited , donde el resultado solo es obvio cuando el Usuario ha presionado el enlace anteriormente.

Sería de gran ayuda si se tiene en cuenta el mnemotécnico: '' V o V e h e te'' cuando se trata de enlaces (excepto :visited , que no funciona con los botones) .

Sin embargo, si realmente desea hacer una anulación, por ejemplo, si desea cambiar el color de un enlace que ya se visitó en estado activo, puede hacer algo como:

a:visited:active {
color: red;
}

Pero la conclusión es, evite cambiar la secuencia estándar si no es necesario.

Answer 3

EDITAR:

Lo siento, entiendo mal la pregunta.

Básicamente, cuando se encuentra en estado activo (con un puntero del mouse), también se encuentra en estado activo. Por lo tanto, según las reglas de CSS, leería la última en la hoja de estilo.

Cuando pasas el cursor sobre un enlace y mantienes presionada la tecla del mouse Es como esto si tomamos clases pseudales como clases normales:

<a class="active hover"></a>

Así que si tu css era

.active{color:green}
.hover{color:red}

se aplicaría rojo

pero si tu css era

.hover{color:red}
.active{color:green}

Se aplicaria verde

Del W3C

a:link { color: red } /* unvisited links */
a:visited { color: blue } /* visited links */
a:hover { color: yellow } /* user hovers */
a:active { color: lime } /* active links */

Tenga en cuenta que A: hover debe colocarse después de las reglas A: link y A: visit, ya que de lo contrario las reglas en cascada ocultarán la propiedad ''color'' de la regla A: hover. De manera similar, dado que A: active se coloca después de A: hover, el color activo (cal) se aplicará cuando el usuario se active y se desplace sobre el elemento A.

Answer 4

El estado activo debe declararse después del estado de desplazamiento, en su CSS está agrupando el estado activo antes del estado activo para que no se active.

Si indica el orden correcto de funcionamiento, funciona, como a continuación, funciona bien.

a.noworks:link, a.noworks:visited {
background: red;
}
a.noworks:hover {
background: green;
}
a.noworks:active {
background: red;
}

Entonces, para responder a tu pregunta, sí, este es el comportamiento esperado.

Aquí está el orden de operación:

a:link
a:visited
a:hover
a:active

Answer 5

Este es el comportamiento esperado en la medida en que la mayoría de las personas siempre colocan la :hover desplazamiento al final del grupo de reglas.

El orden de la declaración es importante con las pseudo-clases (vea más aquí: http://reference.sitepoint.com/css/pseudoclasses ), por lo que las reglas finales tienen prioridad, al igual que con otras reglas en CSS.

Para la mayoría de las personas, creo que el comportamiento deseado:

a:link {
⋮ declarations
}
a:visited {
⋮ declarations
}
a:hover {
⋮ declarations
}

Dado que el :active no es tan útil, se deja de lado ... o se combina con a:link y a:visited ... y luego se anula con a:hover

W3C lo explica aquí:

Tenga en cuenta que A: hover debe colocarse después de las reglas A: link y A: visit, ya que de lo contrario las reglas en cascada ocultarán la propiedad ''color'' de la regla A: hover. De manera similar, dado que A: active se coloca después de A: hover, el color activo (cal) se aplicará cuando el usuario se active y se desplace sobre el elemento A.

http://www.w3.org/TR/CSS2/selector.html#dynamic-pseudo-classes

Incluso W3schools tiene este derecho:

Nota: a: hover DEBE aparecer después de un: link y a: visit en la definición de CSS para que sea efectivo.

Nota: a: active DEBE venir después de que: hover en la definición de CSS para que sea efectivo!

http://www.w3schools.com/css/css_pseudo_classes.asp

Answer 6

Porque en el primer código que definió :hover después de que haya definido :active , entonces :hover "sobreescribió" :active . En el segundo, es al revés :active sobrescribe :active :hover .

Answer 7

Sí, este es el comportamiento esperado,

echemos un vistazo a otro ejemplo. simplemente añadiendo dos clases,

<ul>
<li class="item first">item</li>
<li class="item">item</li>
<li class="item">item</li>
<li class="item">item</li>
<li class="item last">item</li>
</ul>

Aquí la clase primero también viene junto con el elemento de clase. pero si declaramos nuestro css en el orden incorrecto no daríamos el comportamiento deseado

.first { background: blue; }
.item { background: red; }

Como puede ver, se utilizará el último selector coincidente. es lo mismo que su ejemplo, no importa lo que sea más lógica, las 2 pseudo-clases son consideradas iguales, por lo tanto, las mismas reglas aplican a las últimas victorias coincidentes.

editar

Las pseudoclases son iguales, ¡es el último definido el que gana! aquí hay un jsFiddle que prueba mi punto: el enlace se define después de: hover,: link wins ( test ), entonces, su declaración de: hover overriding: link está mal, es lo mismo que con: active, todo se trata de la orden.