Este artigo demonstrará o método para aplicar o efeito hover na grade da coluna no Tailwind CSS.
Como aplicar o foco na grade da coluna no Tailwind?
Para aplicar o efeito de foco na grade da coluna no Tailwind, crie um arquivo HTML e use o “ flutuar ” classe com o “ grid-cols-
Siga as etapas fornecidas para implementação prática:
Etapa 1: Use a propriedade Hover com a grade da coluna no programa HTML
Crie um programa HTML e use o “ flutuar ” propriedade com o “ grid-cols-
< corpo >
< div aula = 'grid grid-cols-3 hover:grid-cols-5 gap-3 m-3 text-center' >
< div aula = 'bg-teal-500 p-5' > 1 < / div >
< div aula = 'bg-teal-500 p-5' > 2 < / div >
< div aula = 'bg-teal-500 p-5' > 3 < / div >
< div aula = 'bg-teal-500 p-5' > 4 < / div >
< div aula = 'bg-teal-500 p-5' > 5 < / div >
< div aula = 'bg-teal-500 p-5' > 6 < / div >
< div aula = 'bg-teal-500 p-5' > 7 < / div >
< div aula = 'bg-teal-500 p-5' > 8 < / div >
< div aula = 'bg-teal-500 p-5' > 9 < / div >
< div aula = 'bg-teal-500 p-5' > 10 < / div >
< / div >
< / corpo >
Aqui, no elemento
- “ grade ” é usada para criar um layout de grade.
- “ grid-cols-3 ” especifica que a grade deve ter 3 colunas de tamanho igual.
- “ hover:grid-cols-5 ” especifica que a grade deve ser alterada em 5 colunas de tamanho igual quando o mouse passa sobre ela.
- “ lacuna-3 ” define um espaçamento de 3 unidades entre cada item da grade.
- “ m-3 ” aplica uma margem de 3 unidades ao redor do contêiner da grade.
- “ centro de texto ” define o texto de cada item da grade para o centro.
Nos elementos filhos
- “ ” representa o número de itens da grade.
- “ bg-teal-500 ” define a cor azul-petróleo para o plano de fundo dos itens da grade.
- “ p-5 ” adiciona um preenchimento de 5 unidades ao conteúdo dentro dos itens filhos
.Etapa 2: verificar a saída
Para garantir que o efeito de foco foi aplicado na grade da coluna, exiba a página da Web e mova o mouse sobre os itens da grade:
Pode ser visto que quando o mouse passa sobre o item da grade, o número de colunas muda. Indica que o efeito hover foi aplicado com sucesso na grade da coluna.
Conclusão
Para aplicar o efeito de foco na grade da coluna no Tailwind, utilize o botão “ flutuar ” classe com o “ grid-cols-
” no programa HTML. Ele altera o número de colunas ao passar o mouse. Para garantir as alterações, visualize a página HTML da Web e passe o mouse sobre os itens da grade. Este artigo demonstrou o método para aplicar o efeito de foco na grade da coluna no Tailwind CSS.