Este artigo demonstrará o método para aplicar o efeito de foco na grade de linha no Tailwind CSS.
Como aplicar o foco na grade de linha no Tailwind?
Para aplicar o efeito de foco na grade de linha no Tailwind, crie um arquivo HTML e use o “ flutuar ” classe com o “ grid-rows-
Confira as etapas fornecidas para implementação prática:
Etapa 1: Use a propriedade Hover com a grade de linha no programa HTML
Crie um programa HTML e use o “ flutuar ” propriedade com o “ grid-rows-
< corpo >
< div aula = 'grid grid-rows-3 hover:grid-rows-5 grid-flow-col 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 ” é utilizada para criar um layout de grade.
- “ grid-rows-3 ” especifica que a grade deve ter 3 linhas de tamanho igual.
- “ hover:grid-rows-5 ” altera a grade em 5 linhas de tamanho igual quando o mouse passa sobre ela.
- “ grid-flow-col ” coloca os itens da grade horizontalmente em colunas.
- “ 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 verificar se o efeito de foco foi aplicado na grade da linha, visualize a página da Web e mova o mouse sobre os itens da grade:
Pode-se observar que inicialmente são 3 linhas e ao passar o mouse sobre ela, o número de linhas mudou para 5. Isso indica que o efeito hover foi aplicado com sucesso na grade de linhas.
Conclusão
Para aplicar o efeito de foco na grade de linha no Tailwind, utilize o botão “ flutuar ” classe com o “ grid-rows-
” no programa HTML. Ele altera o número de linhas 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 ilustrou o método para aplicar o efeito hover na grade de linhas no Tailwind CSS.