Acest articol va demonstra metoda de aplicare a efectului de hover pe grila de rânduri în CSS Tailwind.
Cum se aplică Hover pe grila de rânduri în Tailwind?
Pentru a aplica efectul de hover pe grila de rânduri în Tailwind, creați un fișier HTML și utilizați „ planare ” clasa cu “ grid-rows-
Consultați pașii furnizați pentru implementarea practică:
Pasul 1: Utilizați proprietatea Hover cu grila de rânduri în programul HTML
Creați un program HTML și utilizați „ planare ” proprietate cu ” grid-rows-
< corp >
< div clasă = „grid grid-rows-3 hover:grid-rows-5 grid-flow-col 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 utilizată pentru a crea un aspect al grilei.
- „ grilă-rânduri-3 ” clasă specifică că grila trebuie să aibă 3 rânduri de dimensiuni egale.
- „ hover:grilă-rânduri-5 ” clasa schimbă grila în 5 rânduri de dimensiuni egale atunci când mouse-ul trece peste ea.
- „ grid-flow-col ” clasa plasează elementele grilei orizontal în coloane.
- „ 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 verifica dacă efectul de hover a fost aplicat pe grila de rânduri, vizualizați pagina web și mutați mouse-ul peste elementele grilei:
Se poate observa că inițial sunt 3 rânduri și când mouse-ul trece peste el, numărul de rânduri s-a schimbat la 5. Aceasta indică faptul că efectul de hover a fost aplicat cu succes pe grila de rânduri.
Concluzie
Pentru a aplica efectul de hover pe grila de rânduri în Tailwind, utilizați „ planare ” clasa cu “ grid-rows-
” utilitar în programul HTML. Schimbă numărul de rânduri la trecerea cursorului. Pentru a asigura modificări, vizualizați pagina web HTML și plasați mouse-ul pe elementele grilei. Acest articol a ilustrat metoda de aplicare a efectului de hover pe grila de rânduri în CSS Tailwind.