¿Cómo aplicar 'break-inside' en Hover en Tailwind?

Este artículo ejemplificará el método para aplicar 'romper el interior' al pasar el mouse sobre Tailwind CSS.

¿Cómo aplicar 'break-inside' en Hover en Tailwind?

Para aplicar la 'interrupción' al pasar el mouse en Tailwind, use la propiedad 'desplazamiento' con la utilidad específica de 'interrupción' en los elementos deseados en el programa HTML. Luego, vea la página web para verificar.

Para una demostración práctica, pruebe los pasos que se enumeran a continuación:

Paso 1: use la propiedad Hover con la utilidad 'break-inside'
Cree un programa HTML y utilice el ' flotar ” con la utilidad de “romper el interior” deseada. Por ejemplo, hemos usado la propiedad hover con el ' romper-dentro-evitar-columna ” utilidad para evitar un salto de columna dentro del elemento

al pasar el mouse:

Aquí:

• “ columnas-2 La clase ” se utiliza para dividir el
  en dos columnas.
• “ bg-amarillo-500 La clase ” establece el color amarillo en el fondo del
  .
• “ hover:romper-dentro-evitar-columna La clase ” en el elemento

  indica que cuando el puntero del mouse pasa por encima, se debe evitar el salto de columna dentro del elemento

  .

Paso 2: Verificar salida
Para verificar si la utilidad 'romper-dentro-evitar-columna' se ha aplicado con éxito al pasar el mouse, vea la página web HTML:

El resultado anterior muestra que cuando el usuario pasó el cursor sobre el elemento deseado, se evitó el salto de columna dentro del elemento. Esto indica que 'romper-dentro-evitar-columna' se ha aplicado con éxito al elemento sobre el que se especificó.

Conclusión

Para aplicar el 'romper el interior' al pasar el mouse en Tailwind, use el ' flotar ” propiedad con el deseado “ irrumpir en el interior ” utilidad en el programa HTML. La propiedad de desplazamiento se puede utilizar con cualquier elemento. Para verificar, vea la página web. Este artículo ha explicado el método para aplicar 'romper el interior' al pasar el mouse en Tailwind CSS.