Den här artikeln kommer att demonstrera metoden för att tillämpa hovringseffekten på radrutnätet i Tailwind CSS.
Hur applicerar man Hover på Row Grid i medvind?
För att tillämpa svävningseffekten på radrutnätet i Tailwind, skapa en HTML-fil och använd ' sväva ' klass med ' rutnätsrader-
Kolla in de angivna stegen för praktisk implementering:
Steg 1: Använd hover-egenskapen med radrutnätet i HTML-programmet
Skapa ett HTML-program och använd ' sväva ' egendom med ' rutnätsrader-
< kropp >
< div klass = 'grid grid-rows-3 hover: grid-rows-5 grid-flow-col 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 klass = 'bg-teal-500 p-5' > 7 < / div >
< div klass = 'bg-teal-500 p-5' > 8 < / div >
< div klass = 'bg-teal-500 p-5' > 9 < / div >
< div klass = 'bg-teal-500 p-5' > 10 < / div >
< / div >
< / kropp >
Här, i det överordnade
- ' rutnät ” klass används för att skapa en rutnätslayout.
- ' rutnät-rader-3 ” klass anger att rutnätet ska ha 3 lika stora rader.
- ' hover:grid-rows-5 ” klass ändrar rutnätet till 5 lika stora rader när en mus svävar över den.
- ' rutnät-flöde-kol ” klass placerar rutnätsobjekten horisontellt i kolumner.
- ' gap-3 ” klass anger ett avstånd på 3 enheter mellan varje rutnätsobjekt.
- ' m-3 ” klass tillämpar en marginal på 3 enheter runt gallerbehållaren.
- ' text-center ” klass sätter texten för varje rutnätsobjekt till mitten.
I de underordnade
- ' ” representerar antalet rutnätsobjekt.
- ' bg-teal-500 ” klass ställer in den kricka färgen till bakgrunden för rutnätsobjekt.
- ' p-5 ” klass lägger till en utfyllnad av 5 enheter till innehållet i de underordnade
-objekten.Steg 2: Verifiera utdata
För att verifiera att hovringseffekten har tillämpats på radrutnätet, visa webbsidan och för musen över rutnätsobjekten:
Det kan observeras att det initialt finns 3 rader och när musen svävar över dem har antalet rader ändrats till 5. Detta indikerar att hovringseffekten har tillämpats framgångsrikt på radrutnätet.
Slutsats
För att tillämpa svävningseffekten på radrutnätet i Tailwind, använd ' sväva ' klass med ' rutnätsrader-
”-verktyget i HTML-programmet. Det ändrar antalet rader vid hovring. För att säkerställa ändringar, se HTML-webbsidan och för musen över rutnätsobjekt. Den här artikeln har illustrerat metoden för att tillämpa hovringseffekten på radrutnätet i Tailwind CSS.