Questo articolo dimostrerà il metodo per applicare l'effetto hover sulla griglia di riga in Tailwind CSS.
Come applicare il passaggio del mouse sulla griglia di riga in Tailwind?
Per applicare l'effetto al passaggio del mouse sulla griglia delle righe in Tailwind, crea un file HTML e usa il ' librarsi ” classe con il “ grid-righe-
Dai un'occhiata ai passaggi forniti per l'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 “ grid-righe-
< corpo >
< div classe = 'griglia griglia-righe-3 al passaggio del mouse:griglia-righe-5 griglia-flusso-gap-colonna-3 m-3 centro testo' >
< 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 classe = 'bg-verde acqua-500 p-5' > 7 < / div >
< div classe = 'bg-verde acqua-500 p-5' > 8 < / div >
< div classe = 'bg-verde acqua-500 p-5' > 9 < / div >
< div classe = 'bg-verde acqua-500 p-5' > 10 < / div >
< / div >
< / corpo >
Qui, nell'elemento
- “ griglia La classe ” viene utilizzata per creare un layout a griglia.
- “ griglia-righe-3 ” class specifica che la griglia dovrebbe avere 3 righe di uguali dimensioni.
- “ hover: griglia-righe-5 ” class cambia la griglia in 5 righe di uguali dimensioni quando il mouse ci passa sopra.
- “ griglia-flusso-col La classe ” posiziona gli elementi della griglia orizzontalmente in colonne.
- “ divario-3 ” class imposta una spaziatura di 3 unità tra ogni elemento della griglia.
- “ m-3 ” class applica un margine di 3 unità attorno al contenitore della griglia.
- “ centro del testo ” class imposta il testo di ciascun elemento della griglia al centro.
Negli elementi figlio
- “ ” rappresenta il numero di elementi della griglia.
- “ bg-verde acqua-500 ” class imposta il colore verde acqua sullo sfondo degli elementi della griglia.
- “ p-5 La classe ” aggiunge un riempimento di 5 unità al contenuto all'interno degli elementi figlio
.Passaggio 2: verificare l'output
Per verificare che l'effetto al passaggio del mouse sia stato applicato alla griglia delle righe, visualizzare la pagina Web e spostare il mouse sugli elementi della griglia:
Si può osservare che inizialmente ci sono 3 righe e quando il mouse ci passa sopra, il numero di righe è cambiato in 5. Ciò indica che l'effetto hover è stato applicato con successo sulla griglia delle righe.
Conclusione
Per applicare l'effetto hover sulla griglia delle righe in Tailwind, utilizza il pulsante ' librarsi ” classe con il “ grid-righe-
” nel programma HTML. Cambia il numero di righe al passaggio del mouse. Per garantire le modifiche, visualizzare la pagina Web HTML e passare il mouse sugli elementi della griglia. Questo articolo ha illustrato il metodo per applicare l'effetto hover sulla griglia delle righe in Tailwind CSS.