Den här artikeln kommer att exemplifiera metoden för att tillämpa hovringseffekten på verktyget för automatiskt flöde av rutnät i Tailwind CSS.
Hur applicerar man hover på Grid Auto Flow i medvind?
För att tillämpa svävningseffekten på rutnätets autoflöde i Tailwind, skapa en HTML-fil och använd ' sväva ' klass med ' rutnätsflöde-
Titta på de angivna stegen för dess praktiska genomförande:
Steg 1: Använd hover-egenskapen med radrutnätet i HTML-programmet
Skapa ett HTML-program och använd ' sväva ' egendom med önskad ' rutnätsflöde-
< kropp >
< div klass = 'grid grid-flow-col hover:grid-flow-row gap-3 m-3 text-center' >
< div klass = 'bg-teal-500 p-5' > 1 < / div >
< div klass = 'bg-teal-500 p-5' > 2 < / div >
< div klass = 'bg-teal-500 p-5' > 3 < / div >
< div klass = 'bg-teal-500 p-5' > 4 < / div >
< div klass = 'bg-teal-500 p-5' > 5 < / div >
< div klass = 'bg-teal-500 p-5' > 6 < / div >
< / div >
< / kropp >
Här:
- ' rutnät ” klass anger elementet som en rutnätsbehållare.
- ' rutnät-flöde-kol ” definierar flödet av rutnätsobjekt i kolumner.
- ' hover:grid-flow-row ” klass ändrar flödet av rutnätsobjekt till rader när musen svävar över behållaren.
- ' gap-3 ” lägger till ett mellanrum på 3 enheter mellan rutnätsposterna.
- ' m-3 ” lägger till en marginal på 3 enheter runt gallerbehållaren.
- ' text-center ” justerar textinnehållet inuti rutnätsobjekten till mitten.
Steg 2: Verifiera utdata
För att verifiera att hovringseffekten har tillämpats på rutnätets automatiska flöde, visa webbsidan och för musen över rutnätsobjekten:
Det kan observeras att initialt flödet av rutnätsobjekt är i kolumner och när musen svävar över dem ändras flödet till rader. Detta indikerar att hovringseffekten har tillämpats på det automatiska flödet i rutnätet.
Slutsats
För att tillämpa svävningseffekten på rutnätets autoflöde i Tailwind, använd ' sväva ' klass med önskad ' rutnätsflöde-