Tämä artikkeli on esimerkki menetelmästä, jolla hover-tehostetta käytetään Tailwind CSS:n ruudukon automaattiseen virtausapuohjelmaan.
Kuinka soveltaa Hover on Grid Auto Flow in Tailwind?
Jos haluat käyttää hover-tehostetta Tailwindin ruudukon automaattiseen virtaukseen, luo HTML-tiedosto ja käytä ' leijuu ' luokka ' grid-flow-
Katso annettuja vaiheita sen käytännön toteuttamiseksi:
Vaihe 1: Käytä Hover-ominaisuutta HTML-ohjelman riviruudukon kanssa
Luo HTML-ohjelma ja käytä ' leijuu 'kiinteistö halutulla' grid-flow-
< kehon >
< div luokkaa = 'grid grid-flow-col hover: grid-flow-row-row-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 >
< / kehon >
Tässä:
- ' ruudukko ” luokka asettaa elementin ruudukkosäiliöksi.
- ' grid-flow-col ” määrittää ruudukon kohteiden kulun sarakkeissa.
- ' hover:grid-flow-row ” luokka muuttaa ruudukon kohteiden kulun riveiksi, kun hiiri liikkuu kontin päällä.
- ' väli-3 ” lisää 3 yksikön raon ruudukon kohteiden väliin.
- ' m-3 ” lisää 3 yksikön marginaalia ruudukkosäiliön ympärille.
- ' tekstikeskus ” tasaa tekstisisällön ruudukon kohteiden sisällä keskelle.
Vaihe 2: Tarkista lähtö
Tarkistaaksesi, että hover-tehoste on käytetty ruudukon automaattisessa kulussa, tarkastele verkkosivua ja siirrä hiiri ruudukon kohteiden päälle:
Voidaan havaita, että alun perin ruudukon kohteiden virta on sarakkeissa ja kun hiiri liikkuu niiden päällä, virta muuttuu riveiksi. Tämä osoittaa, että hover-tehoste on onnistuneesti käytetty ruudukon automaattiseen virtaukseen.
Johtopäätös
Jos haluat käyttää hover-tehostetta ruudukon automaattiseen virtaukseen myötätuulessa, käytä ' leijuu 'luokka halutulla' grid-flow-