Este artículo trata sobre el procedimiento de implementación para aplicar hover y otros estados con propiedades de visibilidad usando Tailwind CSS.
¿Cómo aplicar Hover y otros estados con Visibility Utility en Tailwind?
La utilidad de visibilidad se puede utilizar junto con el desplazamiento y otros estados para realizar los cambios de visibilidad en la interacción del usuario. Hay tres clases bajo la utilidad de visibilidad, a saber, ' visible ”, “ invisible ', y ' colapsar ”. Integremos algunas clases de visibilidad con estados de desplazamiento en los siguientes ejemplos para una mejor comprensión.
Ejemplo 1: Aplicar estado de desplazamiento a lo largo de la clase 'invisible'
En este caso, el elemento seleccionado se ocultará cuando el cursor del usuario se desplace sobre el elemento, el código se muestra a continuación:
< cuerpo >
< división clase = 'cuadrícula cuadrícula-cols-3 gap-4 my-4 mx-4' >
< división clase = 'bg-blue-500 p-3 centro de texto redondeado' > 01 < / división >
< división clase = 'bg-blue-500 p-3 hover: centro de texto redondeado invisible' > 02 < / división >
< división clase = 'bg-blue-500 p-3 centro de texto redondeado' > 03 < / división >
< / división >
< / cuerpo >
Explicación del código anterior:
- Primero, se crea el div principal que crea un diseño de cuadrícula de tres columnas con un espacio entre cada columna y el margen de ' 4 píxeles ”. Usando el Tailwind CSS “ red ”, “ grid-cols-3 ”, “ brecha ”, “ mi ', y ' mx ” clases respectivamente.
- A continuación, tres niño “ división Se crean elementos y se les aplica un estilo básico.
- Entonces el ' flotar ” estado o selector en CSS se asigna al segundo “div” y el “ invisible ” se le asigna separado por los dos puntos “ : ' firmar. Esto hace que el segundo div sea invisible cuando se pasa el mouse sobre él.
Vista previa de la página web después de la fase de ejecución:
El gif anterior muestra que el segundo div se vuelve invisible al pasar el mouse.
Ejemplo 2: Aplicar estado activo a lo largo de la clase 'invisible'
El estado “activo” aplica estilos cuando el usuario selecciona un elemento específico y no se va. Al igual que los cuadros de texto cuando un usuario comienza a ingresar datos dentro del campo, en este momento el campo está activo. Para obtener una comprensión más clara del estado activo y cómo funciona con la clase 'invisible', visite el siguiente código:
< cuerpo >< división clase = 'cuadrícula cuadrícula-cols-3 gap-4 my-4 mx-4' >
< división clase = 'bg-blue-500 p-3 centro de texto redondeado' >01< / división >
< división clase = 'bg-blue-500 p-3 activo: centro de texto redondeado invisible' >02< / división >
< división clase = 'bg-blue-500 p-3 centro de texto redondeado' >03< / división >
< / división >
< / cuerpo >
En el código anterior, la clase de “ invisible ” está asignado al “ activo 'estado para el segundo' división ” para ocultar el segundo elemento div cuando se selecciona.
Después de la ejecución, la vista previa de la página web aparece así:
El resultado anterior muestra que cuando se selecciona el segundo 'div', el elemento se vuelve invisible.
Conclusión
El desplazamiento y otros estados como activo o foco se pueden usar con las clases proporcionadas por la utilidad de visibilidad para modificar las propiedades de visibilidad de los elementos seleccionados. Para cambiar la visibilidad de los elementos al pasar el mouse, la clase de desplazamiento se usa junto con las clases de visibilidad separadas por el color como ' flotar: visible ' o ' flotar: invisible ”. Este blog ha explicado el procedimiento para aplicar estados de desplazamiento con la utilidad de visibilidad.