Como aplicar “break-inside” ao passar o mouse no Tailwind?

Este artigo exemplificará o método para aplicar “break-inside” ao passar o mouse no Tailwind CSS.

Como aplicar “break-inside” ao passar o mouse no Tailwind?

Para aplicar o “break-inside” ao passar o mouse no Tailwind, use a propriedade “hover” com o utilitário específico “break-inside” nos elementos desejados no programa HTML. Em seguida, visualize a página da Web para verificação.

Para uma demonstração prática, experimente as etapas listadas abaixo:

Passo 1: Use a propriedade Hover com o utilitário “break-inside”
Crie um programa HTML e utilize o “ flutuar ” com o utilitário “break-inside” desejado. Por exemplo, usamos a propriedade hover com o “ quebrar-dentro-evitar-coluna ” para evitar uma quebra de coluna dentro do elemento

ao passar o mouse:

Aqui:

• “ colunas-2 ” é utilizada para dividir o
  em duas colunas.
• “ bg-amarelo-500 ” define a cor amarela para o fundo do
  .
• “ hover:break-inside-evitar-coluna ” classe no elemento

  indica que, quando o ponteiro do mouse passa, a quebra de coluna deve ser evitada no elemento

  .

Etapa 2: verificar a saída
Para verificar se o utilitário “break-inside-avoid-column” foi aplicado com sucesso ao passar o mouse, visualize a página da Web em HTML:

A saída acima mostra que quando o usuário passou o mouse sobre o elemento desejado, a quebra de coluna dentro do elemento foi evitada. Isso indica que o “break-inside-avoid-column” foi aplicado com sucesso ao elemento em hover de acordo com o qual foi especificado.

Conclusão

Para aplicar o “break-inside” ao passar o mouse no Tailwind, use o botão “ flutuar ” propriedade com o desejado “ arrombamento ” no programa HTML. A propriedade hover pode ser utilizada com qualquer elemento. Para verificação, visualize a página da web. Este artigo explicou o método para aplicar “break-inside” ao passar o mouse no Tailwind CSS.