Acest articol va demonstra metoda de aplicare a efectului de hover pe grila de coloane în CSS Tailwind.
Cum se aplică Hover pe grila de coloane în Tailwind?
Pentru a aplica efectul de hover pe grila de coloane din Tailwind, creați un fișier HTML și utilizați „ planare ” clasa cu “ grid-cols-
Urmați pașii furnizați pentru implementarea practică:
Pasul 1: Utilizați proprietatea Hover cu grila de coloane în programul HTML
Creați un program HTML și utilizați „ planare ” proprietate cu ” grid-cols-
< corp >
< div clasă = „grid grid-cols-3 hover:grid-cols-5 gap-3 m-3 text-center” >
< div clasă = „bg-teal-500 p-5” > 1 < / div >
< div clasă = „bg-teal-500 p-5” > 2 < / div >
< div clasă = „bg-teal-500 p-5” > 3 < / div >
< div clasă = „bg-teal-500 p-5” > 4 < / div >
< div clasă = „bg-teal-500 p-5” > 5 < / div >
< div clasă = „bg-teal-500 p-5” > 6 < / div >
< div clasă = „bg-teal-500 p-5” > 7 < / div >
< div clasă = „bg-teal-500 p-5” > 8 < / div >
< div clasă = „bg-teal-500 p-5” > 9 < / div >
< div clasă = „bg-teal-500 p-5” > 10 < / div >
< / div >
< / corp >
Aici, în elementul părinte
- „ grilă ” este folosită pentru a crea un aspect al grilei.
- „ grid-cols-3 ” specifica că grila trebuie să aibă 3 coloane de dimensiuni egale.
- „ hover:grid-cols-5 ” clasă specifică că grila trebuie schimbată în 5 coloane de dimensiuni egale atunci când mouse-ul trece peste ea.
- „ decalajul-3 ” clasa stabilește o distanță de 3 unități între fiecare element al grilei.
- „ m-3 clasa ” aplică o marjă de 3 unități în jurul containerului grilă.
- „ centru de text ” clasa setează textul fiecărui element al grilei în centru.
În elementele
- „ ” reprezintă numărul de articole din grilă.
- „ bg-teal-500 ” clasa setează culoarea teal pe fundalul elementelor din grilă.
- „ p-5 ” clasa adaugă o umplutură de 5 unități la conținutul din interiorul articolelor
copil.Pasul 2: Verificați ieșirea
Pentru a vă asigura că efectul de hover a fost aplicat pe grila coloanei, vizualizați pagina web și mutați mouse-ul peste elementele grilei:
Se poate observa că atunci când mouse-ul trece peste elementul grilă, numărul de coloane se modifică. Indică faptul că efectul de hover a fost aplicat cu succes pe grila coloanei.
Concluzie
Pentru a aplica efectul de hover pe grila coloanei în Tailwind, utilizați „ planare ” clasa cu “ grid-cols-
” utilitar în programul HTML. Schimbă numărul de coloane la trecerea cursorului. Pentru a asigura modificări, vizualizați pagina web HTML și plasați mouse-ul pe elementele grilei. Acest articol a demonstrat metoda de aplicare a efectului de hover pe grila de coloane în CSS Tailwind.