Mejora de Estilos con Pseudoclases de Acción del Usuario
Las pseudo-clases de acción del usuario permiten aplicar estilos a los elementos según la forma en que los usuarios interactúan con ellos. Se utilizan comúnmente en elementos <button> y <a> para proporcionar retroalimentación durante las interacciones.
La sintaxis es la siguiente:
selector:pseudo-class {
property: value;
}
selectorpuede ser cualquier selector que hemos considerado en los capítulos anteriores;pseudo-classrequiere:antes de su declaración, y no se debe agregar ningún espacio.
Se analizarán las pseudo-clases de estado más útiles (hover, focus, active y visited).
:hover
Se activa cuando un usuario apunta a un elemento con el cursor del ratón. Ideal para crear retroalimentación visual interactiva.
index.html
styles.css
:focus
Se activa cuando un elemento recibe el enfoque del teclado (generalmente mediante la tecla Tab). Para garantizar la accesibilidad, los estilos de hover y focus suelen combinarse, proporcionando una experiencia coherente tanto para usuarios de ratón como de teclado.
La diferencia entre :hover y :focus
:hoverreacciona a la actividad del cursor del ratón;:focusreacciona a la actividad del teclado (tecla "Tab").
En el siguiente ejemplo, tenemos el mismo elemento con diferentes pseudoclases. Por favor, presta atención al archivo styles.css. Podemos notar que es posible agregar los mismos estilos para los efectos de hover y focus separando el selector y la pseudoclase con ,.
index.html
styles.css
:active
Se activa mientras un elemento está siendo activado, comúnmente durante un clic del mouse en botones o enlaces.
index.html
styles.css
:visited
Se aplica a los enlaces después de que el usuario ya ha visitado su destino. Los navegadores suelen mostrar los enlaces no visitados en azul y los visitados en púrpura, a menos que se sobrescriban estos estilos.
index.html
styles.css
1. ¿Qué pseudo-clase se activa cuando un usuario pasa el cursor del ratón sobre un elemento?
2. ¿Qué pseudo-clase se aplica a un enlace que ya ha sido visitado?
¡Gracias por tus comentarios!
Pregunte a AI
Pregunte a AI
Pregunte lo que quiera o pruebe una de las preguntas sugeridas para comenzar nuestra charla
Genial!
Completion tasa mejorada a 2.56Mejora de Estilos con Pseudoclases de Acción del Usuario
Desliza para mostrar el menú
Las pseudo-clases de acción del usuario permiten aplicar estilos a los elementos según la forma en que los usuarios interactúan con ellos. Se utilizan comúnmente en elementos <button> y <a> para proporcionar retroalimentación durante las interacciones.
La sintaxis es la siguiente:
selector:pseudo-class {
property: value;
}
selectorpuede ser cualquier selector que hemos considerado en los capítulos anteriores;pseudo-classrequiere:antes de su declaración, y no se debe agregar ningún espacio.
Se analizarán las pseudo-clases de estado más útiles (hover, focus, active y visited).
:hover
Se activa cuando un usuario apunta a un elemento con el cursor del ratón. Ideal para crear retroalimentación visual interactiva.
index.html
styles.css
:focus
Se activa cuando un elemento recibe el enfoque del teclado (generalmente mediante la tecla Tab). Para garantizar la accesibilidad, los estilos de hover y focus suelen combinarse, proporcionando una experiencia coherente tanto para usuarios de ratón como de teclado.
La diferencia entre :hover y :focus
:hoverreacciona a la actividad del cursor del ratón;:focusreacciona a la actividad del teclado (tecla "Tab").
En el siguiente ejemplo, tenemos el mismo elemento con diferentes pseudoclases. Por favor, presta atención al archivo styles.css. Podemos notar que es posible agregar los mismos estilos para los efectos de hover y focus separando el selector y la pseudoclase con ,.
index.html
styles.css
:active
Se activa mientras un elemento está siendo activado, comúnmente durante un clic del mouse en botones o enlaces.
index.html
styles.css
:visited
Se aplica a los enlaces después de que el usuario ya ha visitado su destino. Los navegadores suelen mostrar los enlaces no visitados en azul y los visitados en púrpura, a menos que se sobrescriban estos estilos.
index.html
styles.css
1. ¿Qué pseudo-clase se activa cuando un usuario pasa el cursor del ratón sobre un elemento?
2. ¿Qué pseudo-clase se aplica a un enlace que ya ha sido visitado?
¡Gracias por tus comentarios!
