:hover :focus :active y :visited
Dé estilo a los estados interactivos de enlaces y botones mediante las pseudo-clases CSS más habituales.
:hover :focus :active y :visited es una lección gratuita de CSS Academy en CoddyKit. Esta es la lección 1 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de CSS Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de CSS Academy incluye 4 lecciones en total.
¿Qué son las pseudoclases?
Las pseudoclases seleccionan elementos según su estado o su relación con otros elementos. Comienzan con dos puntos simples : y no requieren añadir atributos al HTML.
:hover
:hover se aplica cuando el puntero del usuario está sobre un elemento. Es el selector de estado interactivo más común.
<p><a href="#" class="demo-hover">Hover this link</a></p>
<div class="card demo-hover">Hover this card</div>
:focus
:focus se aplica cuando un elemento recibe el foco (mediante la tecla Tab o mediante el foco programático). Es fundamental para la accesibilidad.
<input type="text" placeholder="Auto-focused input" autofocus />
<button>Click me (focus me too)</button>
:focus-visible
:focus-visible es una versión más inteligente de :focus: solo muestra el anillo de foco cuando este se recibe mediante el teclado, no mediante el ratón. Así, los usuarios del teclado disponen de indicadores de foco sin anillos al hacer clic con el ratón.
<button autofocus>Keyboard-focused button shows a ring</button>
:focus-within
:focus-within se aplica a un elemento cuando cualquiera de sus descendientes tiene el foco. Es útil para aplicar estilos a contenedores de formularios o barras de búsqueda cuando están activas.
<form class="search-form"><input type="search" placeholder="Search…" autofocus /></form>
:active
:active se aplica mientras se activa un elemento, durante un clic del ratón o un toque. Crea una respuesta visual para los elementos interactivos.
<button class="demo-active">Pressed button (demo state)</button>
:visited
:visited aplica estilos a los enlaces que el usuario ya ha visitado. Debido a cuestiones de privacidad, solo se puede aplicar estilo a un conjunto limitado de propiedades con :visited (color, background-color, border-color, outline-color).
<a href="#" class="demo-visited">Visited link</a>
Orden de los estados de los enlaces (LVHA)
Al aplicar estilos a los cuatro estados de los enlaces, siga el orden LVHA para evitar problemas de especificidad: Link, Visited, Hover, Active.
<p><a href="#">Unvisited (link)</a></p>
<p><a href="#" class="demo-visited">Visited</a></p>
<p><a href="#" class="demo-hover">Hover</a></p>
<p><a href="#" class="demo-active">Active</a></p>
Hover en dispositivos táctiles
Las pantallas táctiles no tienen un estado hover igual que los ratones. :hover puede activarse brevemente al tocar la pantalla. Para interacciones específicas de dispositivos táctiles, utilice :active o la consulta de medios @media (hover: none).
Combinación de estados
Las pseudoclases pueden encadenarse para aplicar estilos a varios estados simultáneamente:
<a href="#" class="demo-visited-hover">Visited link being hovered</a>
<button>Click-focused button gets no ring</button>
Transición de estados hover
Cree efectos hover suaves mediante transiciones en el estado base (no en el estado :hover), para que la transición se reproduzca en ambas direcciones:
<button class="btn demo-hover">Hover transitions smoothly</button>
Comprobación rápida
¿Qué pseudoclase muestra estilos de foco solo para la navegación con teclado y no para los clics del ratón?
Repaso
:hover se activa al situar el puntero encima; :focus, al recibir el foco; :active, durante un clic; y :visited, para enlaces visitados. Utilice :focus-visible para mostrar anillos de foco solo al usar el teclado. Siga el orden LVHA para los estados de los enlaces. Proporcione siempre indicadores de foco visibles para garantizar la accesibilidad.
Preguntas frecuentes
¿La lección «:hover :focus :active y :visited» es gratis?
Sí — el texto completo de «:hover :focus :active y :visited» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de CSS Academy, actualiza a CoddyKit PRO. El curso de CSS Academy incluye 4 lecciones en total.
¿Qué aprenderé en «:hover :focus :active y :visited»?
Dé estilo a los estados interactivos de enlaces y botones mediante las pseudo-clases CSS más habituales. Practicas CSS Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar CSS Academy?
No se requiere experiencia previa. CSS Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 4.
¿Cuánto tiempo toma la lección «:hover :focus :active y :visited»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de CSS Academy?
Sí. Cada lección de CSS Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- :hover :focus :active y :visited
- :nth-child y :nth-of-type
- :not(), :is() y :where()
- :checked, :disabled y pseudoclases de estado de formularios