Este artigo trata do procedimento de implementação para aplicar hover e outros estados com propriedades de visibilidade usando Tailwind CSS.
Como aplicar o hover e outros estados com o utilitário de visibilidade no Tailwind?
O utilitário de visibilidade pode ser usado ao passar o mouse e outros estados para fazer as alterações de visibilidade na interação do usuário. Existem três classes sob o utilitário de visibilidade, ou seja, “ visível ”, “ invisível ', e ' colapso ”. Vamos integrar algumas classes de visibilidade com estados de foco nos exemplos abaixo para melhor compreensão.
Exemplo 1: Aplicando o estado de foco ao longo da classe “invisível”
Neste caso, o elemento selecionado ficará oculto quando o cursor do usuário passar sobre o elemento, o código é mostrado abaixo:
< corpo >
< div aula = 'grid grid-cols-3 gap-4 my-4 mx-4' >
< div aula = 'bg-blue-500 p-3 centro de texto arredondado' > 01 < / div >
< div aula = 'bg-blue-500 p-3 hover:invisible rounded text-center' > 02 < / div >
< div aula = 'bg-blue-500 p-3 centro de texto arredondado' > 03 < / div >
< / div >
< / corpo >
Explicação do código acima:
- Primeiro, o div pai é criado, criando um layout de grade de três colunas com um espaço entre cada coluna e a margem de “ 4px ”. Usando o Tailwind CSS “ grade ”, “ grid-cols-3 ”, “ brecha ”, “ meu ', e ' mx ” classes respectivamente.
- Em seguida, três filhos “ div ” elementos são criados e o estilo básico é aplicado a eles.
- Então o ' flutuar ” O estado ou seletor em CSS é atribuído ao segundo “div” e o “ invisível ” é atribuído a ele separado por dois pontos “ : ' sinal. Isso torna o segundo div invisível quando o mouse passa sobre ele.
Pré-visualização da página web após a fase de execução:
O gif acima mostra que o segundo div está se tornando invisível ao passar o mouse.
Exemplo 2: Aplicando o estado ativo ao longo da classe “invisível”
O estado “ativo” aplica estilos quando o usuário seleciona um elemento específico e não sai. Assim como as caixas de texto quando um usuário começa a inserir dados dentro do campo, neste momento o campo está ativo. Para entender melhor o estado ativo e como ele funciona com a classe “invisível”, acesse o código abaixo:
< corpo >< div aula = 'grid grid-cols-3 gap-4 my-4 mx-4' >
< div aula = 'bg-blue-500 p-3 centro de texto arredondado' >01< / div >
< div aula = 'bg-blue-500 p-3 ativo: centro de texto arredondado invisível' >02< / div >
< div aula = 'bg-blue-500 p-3 centro de texto arredondado' >03< / div >
< / div >
< / corpo >
No código acima, a classe de “ invisível ” é atribuído ao “ ativo ” estado para o segundo “ div ” para tornar o segundo elemento div oculto quando for selecionado.
Após a execução, a visualização da página da Web aparece assim:
A saída acima mostra que quando o segundo “div” é selecionado, o elemento se torna invisível.
Conclusão
O hover e outros estados como ativo ou foco podem ser usados com as classes fornecidas pelo utilitário de visibilidade para modificar as propriedades de visibilidade dos elementos selecionados. Para alterar a visibilidade dos elementos ao passar o mouse, a classe hover é usada junto com as classes de visibilidade separadas por cores como “ pairar:visível ' ou ' pairar: invisível ”. Este blog explicou o procedimento para aplicar estados de foco com o utilitário de visibilidade.