Este artículo demostrará el procedimiento para aplicar hover con decoración de caja en Tailwind.
¿Cómo aplicar el Hover on Box Decoration Break en Tailwind?
La propiedad CSS 'box-decoration-break' determina la representación del fondo, el borde y el relleno de un elemento cuando abarca varias líneas o columnas. Para aplicar el efecto de desplazamiento sobre los elementos de ruptura de la decoración de la caja, es necesario utilizar el botón “ flotar ” propiedad y aplicar cualquier efecto a los elementos.
Echa un vistazo a los pasos proporcionados a continuación para una demostración práctica:
Paso 1: use la propiedad Hover en el salto de decoración de cuadro en el programa HTML
Cree un programa HTML y utilice cualquier propiedad flotante en los elementos de ruptura de la decoración de la caja. Por ejemplo, hemos aplicado un “ hover:caja-decoración-clon ” en el elemento “box decoration-slice” y un “ hover: texto-amarillo-500 ” en el elemento “box-decoration-clone”:
< cuerpo >
< durar clase = 'box-decoration-slice hover:box-decoration-clone bg-teal-600 text-white text-3xl px-2' >
linux < hermano / >
Pista
< / durar >
< hermano >
< hermano >
< durar clase = 'box-decoration-clone hover:text-yellow-500 bg-teal-600 text-white text-3xl px-2' >
linux < hermano / >
Pista
< / durar >
< / cuerpo >
Aquí:
- El ' hover:caja-decoración-clon ” aplica un efecto de “clonación de decoración de caja” cuando se pasa el cursor sobre el elemento “rebanada de decoración de caja”.
- El ' hover: texto-amarillo-500 ” cambia el color del texto a amarillo cuando se pasa el cursor sobre el elemento “box-decoration-clone”.
Paso 2: Verificar salida
Ejecute el programa HTML para verificar el resultado:
El resultado anterior muestra que el efecto de desplazamiento se ha aplicado a los elementos según los cuales se especificó.
Conclusión
Tailwind CSS ofrece una colección de clases de utilidad para aplicar efectos de desplazamiento a cualquier elemento. Para aplicar un desplazamiento sobre los elementos de ruptura de la decoración de la caja, use el botón ' flotar ” y especifique el efecto en el programa HTML. Los usuarios pueden cambiar el color de fondo, el color del texto y el color del borde, o agregar una sombra a un elemento al pasar el mouse. Este artículo ha explicado el procedimiento para aplicar hover con decoración de caja en Tailwind.