Questo articolo esemplifica il metodo per applicare l'effetto al passaggio del mouse sull'utilità di flusso automatico della griglia in Tailwind CSS.
Come applicare il passaggio del mouse sul flusso automatico della griglia in Tailwind?
Per applicare l'effetto hover sul flusso automatico della griglia in Tailwind, creare un file HTML e utilizzare il ' librarsi ” classe con il “ grid-flow-
Guarda i passaggi forniti per la sua implementazione pratica:
Passaggio 1: utilizzare la proprietà Hover con la griglia di riga nel programma HTML
Creare un programma HTML e utilizzare il ' librarsi ” proprietà con il desiderato “ grid-flow-
< corpo >
< div classe = 'grid grid-flow-col hover:grid-flow-row gap-3 m-3 text-center' >
< div classe = 'bg-verde acqua-500 p-5' > 1 < / div >
< div classe = 'bg-verde acqua-500 p-5' > 2 < / div >
< div classe = 'bg-verde acqua-500 p-5' > 3 < / div >
< div classe = 'bg-verde acqua-500 p-5' > 4 < / div >
< div classe = 'bg-verde acqua-500 p-5' > 5 < / div >
< div classe = 'bg-verde acqua-500 p-5' > 6 < / div >
< / div >
< / corpo >
Qui:
- “ griglia La classe ” imposta l'elemento come contenitore della griglia.
- “ griglia-flusso-col ” definisce il flusso degli elementi della griglia nelle colonne.
- “ hover:grid-flow-row La classe ” cambia il flusso degli elementi della griglia in righe quando il mouse passa sopra il contenitore.
- “ divario-3 ” aggiunge uno spazio di 3 unità tra gli elementi della griglia.
- “ m-3 ” aggiunge un margine di 3 unità attorno al contenitore della griglia.
- “ centro del testo ” allinea al centro il contenuto del testo all'interno degli elementi della griglia.
Passaggio 2: verificare l'output
Per verificare che l'effetto hover sia stato applicato al flusso automatico della griglia, visualizzare la pagina Web e spostare il mouse sugli elementi della griglia:
Si può osservare che inizialmente il flusso degli elementi della griglia è in colonne e quando il mouse ci passa sopra, il flusso viene cambiato in righe. Ciò indica che l'effetto hover è stato applicato correttamente al flusso automatico della griglia.
Conclusione
Per applicare l'effetto hover sul flusso automatico della griglia in Tailwind, utilizza il pulsante ' librarsi ” classe con il desiderato “ grid-flow-