# States (variantes interactivas) > Documentación de QuicklyCSS V2 2.0.0-alpha.2. Versión preliminar. - Página canónica: https://quicklycss.cl/docs/states.php - Catálogo de API: https://quicklycss.cl/quicklycss-api.json - Índice para IA: https://quicklycss.cl/llms.txt Utilidades · Interacción Aplica estilos en respuesta a hover, foco, activación y controles deshabilitados; también coordina elementos relacionados mediante group y peer. v2.0 7 ## Siete contextos Hover, focus, focus-visible, active, disabled, group y peer cubren los estados frecuentes. : ## Sintaxis explícita El prefijo indica cuándo actúa la utilidad: `hover:text-secondary`. ⌨ ## Foco visible Las variantes focus-visible conservan una señal clara para la navegación con teclado. i ## Los dos puntos forman parte del nombre En HTML escribe `hover:text-secondary`. El escape `hover\:text-secondary` se utiliza únicamente dentro del selector CSS. Código + resultado ## Compara todas las familias de estado Selecciona una opción y prueba el resultado con puntero, teclado o el control nativo correspondiente. ¿Cambia el propio elemento? Usa `hover:`, `focus:` o `active:` ¿El control no está disponible? Usa el atributo HTML y `disabled:` ¿Responde otro elemento? Usa `group-*` o `peer-*` HTML ```html Ver proyecto ``` Resultado aplicado HOVER · 4 PROPIEDADES Pasa el cursor sobre el control Ver proyecto → Opciones: texto `primary`, `secondary`, `success`, `warning`, `danger`, `info`, `muted` y `text`; fondo y borde admiten los siete colores semánticos; opacidad admite 50, 75 y 100. HTML ```html ``` Resultado aplicado FOCUS · 4 OPCIONES Haz clic o usa Tab Opciones: `focus:outline-none`, `focus:text-primary`, `focus:bg-primary` y `focus:border-primary`. HTML ```html ``` Resultado aplicado FOCUS VISIBLE · TECLADO Usa Tab para mostrar el anillo Opciones: `focus-visible:outline-none`, `focus-visible:ring` y `focus-visible:ring-2`. HTML ```html ``` Resultado aplicado ACTIVE · PRESIONA Mantén presionado el control Opciones: `active:scale-95`, `active:opacity-75` y `active:bg-primary`. HTML ```html ``` Resultado aplicado DISABLED · ATRIBUTO NATIVO Control no disponible Opciones: `disabled:opacity-30`, `disabled:opacity-50`, `disabled:pointer-events-none` y `disabled:cursor-not-allowed`. HTML ```html
Proyecto Ver detalle
``` Resultado aplicado GROUP · CONTENEDOR + HIJO Pasa el cursor por toda la tarjeta Proyecto residencial Ver detalle → Opciones: `group`, `group-hover:text-primary`, `group-hover:bg-primary`, `group-hover:border-primary` y `group-hover:opacity-75`. HTML ```html ``` Resultado aplicado PEER · HERMANO ANTERIOR Marca la casilla o enfócala con Tab Acepto las condiciones Opciones: `peer`, tres variantes `peer-checked:*`, `peer-focus:ring` y `peer-focus-visible:ring`. Puntero ## Hover para color, fondo, borde y opacidad El prefijo `hover:` aplica la declaración mientras el puntero permanece sobre el propio elemento. `hover:text-*` TEXTO #### Color tipográfico ```html Ver proyecto ``` Resultado Ver proyecto → Cambia el color sin modificar fondo ni borde. `hover:bg-*` FONDO #### Superficie interactiva ```html ``` Resultado `bg-primary` es una superficie clara; texto y borde primarios mantienen el contraste. `hover:border-*` BORDE #### Énfasis de contorno ```html Más información ``` Resultado Más información → Requiere que el elemento ya tenga estructura de borde. `hover:opacity-*` OPACIDAD #### Intensidad visual ```html Proyecto ``` Resultado ![Interior de un proyecto arquitectónico](../templates/album/img/gallery-interior.jpg) También admite `hover:opacity-50` y `hover:opacity-100`. Teclado y formularios ## Focus y focus-visible cumplen funciones distintas `focus:` responde a cualquier foco; `focus-visible:` limita la señal visual a los casos en que el navegador la considera necesaria. | Clase | Efecto | Uso recomendado | | --- | --- | --- | | focus:outline-none | Elimina el outline nativo. | Sólo cuando se proporciona una alternativa visible. | | focus:text-primary | Cambia el color del texto. | Enlaces y controles con etiqueta. | | focus:bg-primary | Cambia el fondo. | Controles que necesitan énfasis adicional. | | focus:border-primary | Cambia el color del borde. | Campos con borde previamente definido. | | focus-visible:ring | Outline de 2px. | Navegación visible con teclado. | | focus-visible:ring-2 | Outline de 3px. | Énfasis reforzado en acciones principales. | No elimines el foco sin reemplazo Si utilizas `focus-visible:outline-none`, combínalo con `focus-visible:ring` o `focus-visible:ring-2`. Respuesta y disponibilidad ## Active y disabled Active comunica la pulsación actual; disabled refleja controles nativos que no pueden ejecutarse. `active:scale-95` ACTIVE #### Escala al 95% Produce una respuesta física breve durante la pulsación. `active:opacity-75` ACTIVE #### Opacidad al 75% Reduce temporalmente la intensidad del control. `active:bg-primary` ACTIVE #### Fondo primario Refuerza el estado presionado con color. `disabled:opacity-50` DISABLED #### Opacidad al 50% Comunica indisponibilidad sin ocultar el control. `disabled:pointer-events-none` DISABLED #### Sin eventos de puntero Evita interacciones del puntero en un control deshabilitado. `disabled:cursor-not-allowed` DISABLED #### Cursor no permitido Añade una pista visual; no reemplaza el atributo HTML `disabled`. Referencia oficial ## Clases disponibles Esta tabla refleja el archivo fuente de la versión 2.0.0-alpha.2. | Familia | Clases disponibles | | --- | --- | | Hover · texto | hover:text-primary , hover:text-secondary , hover:text-success , hover:text-warning , hover:text-danger , hover:text-info , hover:text-muted , hover:text | | Hover · fondo | hover:bg-primary , hover:bg-secondary , hover:bg-success , hover:bg-warning , hover:bg-danger , hover:bg-info , hover:bg-muted | | Hover · borde | hover:border-primary , hover:border-secondary , hover:border-success , hover:border-warning , hover:border-danger , hover:border-info , hover:border-muted | | Hover · opacidad | hover:opacity-50 , hover:opacity-75 , hover:opacity-100 | | Focus | focus:outline-none , focus:text-primary , focus:bg-primary , focus:border-primary | | Focus visible | focus-visible:outline-none , focus-visible:ring , focus-visible:ring-2 | | Active | active:scale-95 , active:opacity-75 , active:bg-primary | | Disabled | disabled:opacity-50 , disabled:opacity-30 , disabled:pointer-events-none , disabled:cursor-not-allowed | | Group hover | group , group-hover:text-primary , group-hover:bg-primary , group-hover:border-primary , group-hover:opacity-75 | | Peer | peer , peer-checked:text-primary , peer-checked:bg-primary , peer-checked:border-primary , peer-focus:ring , peer-focus-visible:ring | Recomendaciones ## Estados comprensibles y accesibles 01 ### No dependas sólo de hover Toda acción debe funcionar también con teclado, tacto y tecnologías de asistencia. 02 ### Conserva el foco Evita eliminar el outline si no añades una señal visible equivalente o superior. 03 ### Usa atributos nativos `disabled:*` necesita el atributo `disabled`; la apariencia no sustituye la semántica. 04 ### Suaviza con intención Combina estados con Transition y respeta siempre `prefers-reduced-motion`.