Tämä artikkeli esittelee menetelmän käyttää hover-tehostetta riviruudukossa Tailwind CSS:ssä.
Kuinka käyttää Hover on riviruudukkoa Tailwindissä?
Jos haluat käyttää hover-tehostetta Tailwindin riviruudukossa, luo HTML-tiedosto ja käytä ' leijuu ' luokka ' grid-rows-
Katso annetut vaiheet käytännön toteuttamista varten:
Vaihe 1: Käytä Hover-ominaisuutta HTML-ohjelman riviruudukon kanssa
Luo HTML-ohjelma ja käytä ' leijuu ' kiinteistö ' grid-rows-
< kehon >
< div luokkaa = 'grid grid-rows-3 hover:grid-rows-5 grid-flow-col gap-3 m-3 text-center' >
< div luokkaa = 'bg-teal-500 p-5' > 1 < / div >
< div luokkaa = 'bg-teal-500 p-5' > 2 < / div >
< div luokkaa = 'bg-teal-500 p-5' > 3 < / div >
< div luokkaa = 'bg-teal-500 p-5' > 4 < / div >
< div luokkaa = 'bg-teal-500 p-5' > 5 < / div >
< div luokkaa = 'bg-teal-500 p-5' > 6 < / div >
< div luokkaa = 'bg-teal-500 p-5' > 7 < / div >
< div luokkaa = 'bg-teal-500 p-5' > 8 < / div >
< div luokkaa = 'bg-teal-500 p-5' > 9 < / div >
< div luokkaa = 'bg-teal-500 p-5' > 10 < / div >
< / div >
< / kehon >
Tässä ylätason
- ' ruudukko ” -luokkaa käytetään ruudukkoasettelun luomiseen.
- ' ruudukko-rivit-3 ” luokka määrittelee, että ruudukossa tulee olla 3 samankokoista riviä.
- ' hover:grid-rows-5 ” luokka muuttaa ruudukon 5 samankokoiseksi riviksi, kun hiiri liikkuu sen päällä.
- ' grid-flow-col ” luokka sijoittaa ruudukon kohteet vaakasuoraan sarakkeisiin.
- ' väli-3 ” luokka asettaa 3 yksikön välin kunkin ruudukon kohteen väliin.
- ' m-3 ” luokka soveltaa 3 yksikön marginaalia ruudukkosäiliön ympärille.
- ' tekstikeskus ”-luokka asettaa jokaisen ruudukon tekstin keskelle.
Alatason
- ' ” edustaa ruudukon kohteiden määrää.
- ' bg-teal-500 ” luokka asettaa sinivihreän värin ruudukkokohteiden taustalle.
- ' p-5 ” luokka lisää 5 yksikön täytteen sisältöön
-alakohteiden sisällä.Vaihe 2: Tarkista lähtö
Tarkistaaksesi, että hover-tehoste on otettu käyttöön riviruudukossa, tarkastele verkkosivua ja siirrä hiiren osoitin ruudukon kohteiden päälle:
Voidaan havaita, että aluksi rivejä on 3 ja kun hiiri vie sen päälle, rivien määrä on muuttunut 5:ksi. Tämä osoittaa, että hover-tehoste on otettu käyttöön riviruudukossa onnistuneesti.
Johtopäätös
Voit käyttää hover-tehostetta Tailwindin riviruudukossa käyttämällä ' leijuu ' luokka ' grid-rows-
”-apuohjelma HTML-ohjelmassa. Se muuttaa osoittimen rivien määrää. Varmista muutokset tarkastelemalla web-HTML-sivua ja viemällä hiiren osoitinta ruudukon kohteiden päälle. Tämä artikkeli on havainnollistanut tapaa käyttää hover-tehostetta Tailwind CSS:n riviruudukossa.