Tämä artikkeli esittelee menetelmän käyttää hover-tehostetta sarakeruudukossa Tailwind CSS:ssä.
Kuinka soveltaa Hover on sarakeruudukko Tailwindissa?
Jos haluat käyttää hover-tehostetta Tailwindin sarakeruudukossa, luo HTML-tiedosto ja käytä ' leijuu ' luokka ' grid-cols-
Käytä annettuja ohjeita noudattamalla käytännön toteutusta:
Vaihe 1: Käytä Hover-ominaisuutta HTML-ohjelman sarakeruudukon kanssa
Luo HTML-ohjelma ja käytä ' leijuu ' kiinteistö ' grid-cols-
< kehon >
< div luokkaa = 'grid grid-cols-3 hover:grid-cols-5 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-sarakkeet-3 ” luokka määrittelee, että ruudukossa tulee olla 3 samankokoista saraketta.
- ' hover:grid-cols-5 ” luokka määrittelee, että ruudukko tulee muuttaa 5 samankokoiseksi sarakkeeksi, kun hiiri liikkuu sen päällä.
- ' 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ö
Varmistaaksesi, että hover-tehoste on käytetty sarakeruudukossa, tarkastele verkkosivua ja siirrä hiiri ruudukon kohteiden päälle:
Voidaan nähdä, että kun hiiri liikkuu ruudukon kohteen päällä, sarakkeiden lukumäärä muuttuu. Se osoittaa, että hover-tehoste on otettu onnistuneesti käyttöön sarakeruudukossa.
Johtopäätös
Käytä hover-tehostetta Tailwindin sarakeruudukossa käyttämällä ' leijuu ' luokka ' grid-cols-
”-apuohjelma HTML-ohjelmassa. Se muuttaa sarakkeiden lukumäärää hiirellä. Varmista muutokset tarkastelemalla web-HTML-sivua ja viemällä hiiren osoitinta ruudukon kohteiden päälle. Tämä artikkeli on osoittanut menetelmän käyttää hover-tehostetta sarakeruudukossa Tailwind CSS:ssä.