Mejorando Estilos con Pseudoclases de Acción del Usuario
Las pseudo-clases de acción del usuario permiten aplicar estilos a un elemento interactivo según su estado actual. Facilitan la interacción del usuario y le informan sobre las acciones recientes. Generalmente, se añaden las pseudo-clases de estado a los elementos <button> y <a>.
La sintaxis es la siguiente:
selector:pseudo-class {
property: value;
}
selectorpuede ser cualquier selector mencionado en los capítulos anteriores;pseudo-classrequiere:antes de su declaración, y no se debe añadir ningún espacio.
Nota
Se analizarán las pseudo-clases de estado más útiles (
hover,focus,activeyvisited).
:hover
La pseudo-clase :hover se utiliza para responder a las acciones del usuario cuando interactúa con un elemento mediante un dispositivo apuntador, como al pasar el cursor del ratón sobre el elemento. Se puede probar este comportamiento en el siguiente ejemplo, pasando el cursor sobre los elementos button y a para observar el efecto.
index.html
styles.css
:focus
La pseudo-clase :focus funciona de manera similar a la pseudo-clase :hover. Responde al enfoque de un elemento, que normalmente se logra mediante la navegación por teclado usando la tecla "Tab". Para garantizar la coherencia en el comportamiento de los elementos interactivos para todos los usuarios, se recomienda utilizar ambas pseudo-clases juntas para el estilo. De este modo, los usuarios que navegan con el ratón y aquellos que utilizan el teclado pueden recibir la misma experiencia.
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, preste 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
:active se activa cuando un elemento es activado, por ejemplo, al hacer clic en un enlace. Aunque cualquier elemento puede ser activado, esta pseudoclase se utiliza generalmente para enlaces y botones.
index.html
styles.css
:visited
La pseudo-clase :visited se aplica a los enlaces que ya han sido visitados. Por defecto, los enlaces se muestran en azul y cambian a púrpura cuando han sido visitados.
index.html
styles.css
1. ¿Qué pseudoclase se activa cuando un usuario pasa el cursor del ratón sobre un elemento?
2. ¿Qué pseudoclase 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
Can you explain more about how to use :hover and :focus together?
What are some best practices for styling interactive elements with these pseudo-classes?
Can you show examples of using :active and :visited as well?
Awesome!
Completion rate improved to 2.56Mejorando 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 un elemento interactivo según su estado actual. Facilitan la interacción del usuario y le informan sobre las acciones recientes. Generalmente, se añaden las pseudo-clases de estado a los elementos <button> y <a>.
La sintaxis es la siguiente:
selector:pseudo-class {
property: value;
}
selectorpuede ser cualquier selector mencionado en los capítulos anteriores;pseudo-classrequiere:antes de su declaración, y no se debe añadir ningún espacio.
Nota
Se analizarán las pseudo-clases de estado más útiles (
hover,focus,activeyvisited).
:hover
La pseudo-clase :hover se utiliza para responder a las acciones del usuario cuando interactúa con un elemento mediante un dispositivo apuntador, como al pasar el cursor del ratón sobre el elemento. Se puede probar este comportamiento en el siguiente ejemplo, pasando el cursor sobre los elementos button y a para observar el efecto.
index.html
styles.css
:focus
La pseudo-clase :focus funciona de manera similar a la pseudo-clase :hover. Responde al enfoque de un elemento, que normalmente se logra mediante la navegación por teclado usando la tecla "Tab". Para garantizar la coherencia en el comportamiento de los elementos interactivos para todos los usuarios, se recomienda utilizar ambas pseudo-clases juntas para el estilo. De este modo, los usuarios que navegan con el ratón y aquellos que utilizan el teclado pueden recibir la misma experiencia.
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, preste 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
:active se activa cuando un elemento es activado, por ejemplo, al hacer clic en un enlace. Aunque cualquier elemento puede ser activado, esta pseudoclase se utiliza generalmente para enlaces y botones.
index.html
styles.css
:visited
La pseudo-clase :visited se aplica a los enlaces que ya han sido visitados. Por defecto, los enlaces se muestran en azul y cambian a púrpura cuando han sido visitados.
index.html
styles.css
1. ¿Qué pseudoclase se activa cuando un usuario pasa el cursor del ratón sobre un elemento?
2. ¿Qué pseudoclase se aplica a un enlace que ya ha sido visitado?
¡Gracias por tus comentarios!
