El :activepseudo selector cambia la apariencia de un enlace mientras se activa (se hace clic en él o se activa). Por lo general, solo se ve durante una fracción de segundo y proporciona información visual de que se hizo clic en el elemento. Se usa más comúnmente en enlaces de anclaje ( ).
Por ejemplo, aquí está CSS que hará que los enlaces de anclaje bajen un píxel (dando la impresión de ser empujados en un espacio tridimensional) en el estado activo:
Vea el Pen: estado activo por CSS-Tricks Team (@ css-tricks) en CodePen.
: Active también se puede aplicar a cualquier elemento. En el lápiz a continuación, al hacer clic en cualquier lugar de la página, toda la página se volverá amarilla:
Vea la demostración de lápiz de la clase activa psuedo de CSS-Tricks Team (@ css-tricks) en CodePen.
Es una buena práctica cubrir todos los "estados", especialmente para los enlaces. Una forma fácil de hacerlo es "AMAR EL ODIO" o
L: enlace
O
V: visitado
E
H: desplazarse
A: activo
T
E
Hacerlos en ese orden es ideal.
a:link ( /* Essentially means a(href), or that the link actually goes somewhere */ color: blue; ) a:visited ( color: purple; ) a:hover ( color: green; ) a:active ( color: red; )De lo contrario, diga que si enumeró el estilo: visitado en último lugar, si ese enlace fue visitado, anularía la declaración: active y: hover y el enlace siempre será de color púrpura, independientemente de si estaba flotando o si el enlace estaba activo (no es ideal).
Soporte del navegador
| Cromo | Safari | Firefox | Ópera | ES DECIR | Androide | iOS |
|---|---|---|---|---|---|---|
| sí | 2.0.4+ | alguna | 4+ | 4+ | TBD | TBD |