Acest articol va exemplifica metoda de aplicare a efectului de hover asupra utilitarului de flux automat al rețelei în Tailwind CSS.
Cum se aplică Hover pe Grid Auto Flow în Tailwind?
Pentru a aplica efectul de hover asupra fluxului automat al grilei în Tailwind, creați un fișier HTML și utilizați „ planare ” clasa cu “ grid-flow-
Priviți pașii furnizați pentru implementarea sa 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 ” dorit grid-flow-
< corp >
< div clasă = „grid grid-flow-col hover:grid-flow-row 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 >
< / corp >
Aici:
- „ grilă ” class setează elementul ca un container grid.
- „ grid-flow-col ” definește fluxul elementelor grilei în coloane.
- „ hover:grid-flow-row ” clasa schimbă fluxul de elemente ale grilei în rânduri atunci când mouse-ul trece peste container.
- „ decalajul-3 ” adaugă un decalaj de 3 unități între elementele grilei.
- „ m-3 ” adaugă o marjă de 3 unități în jurul containerului grilă.
- „ centru de text ” aliniază conținutul textului din interiorul elementelor grilei la centru.
Pasul 2: Verificați ieșirea
Pentru a verifica dacă efectul de hover a fost aplicat fluxului automat al grilei, vizualizați pagina web și mutați mouse-ul peste elementele grilei:
Se poate observa că inițial fluxul de elemente ale grilei este în coloane și când mouse-ul trece peste ele, fluxul se schimbă în rânduri. Aceasta indică faptul că efectul de hover este aplicat cu succes fluxului automat al grilei.
Concluzie
Pentru a aplica efectul de hover asupra fluxului automat al grilei în Tailwind, utilizați „ planare ” clasa cu ” dorită grid-flow-