Ang artikulong ito ay magiging halimbawa ng paraan upang ilapat ang hover effect sa grid auto flow utility sa Tailwind CSS.
Paano Mag-apply ng Hover sa Grid Auto Flow sa Tailwind?
Para ilapat ang hover effect sa grid auto flow sa Tailwind, gumawa ng HTML file at gamitin ang “ hover 'klase na may ' grid-flow-
Tingnan ang ibinigay na mga hakbang para sa praktikal na pagpapatupad nito:
Hakbang 1: Gamitin ang Hover Property Gamit ang Row Grid sa HTML Program
Gumawa ng HTML program at gamitin ang “ hover ' ari-arian na may ninanais ' grid-flow-
< katawan >
< div klase = 'grid grid-flow-col hover:grid-flow-row gap-3 m-3 text-center' >
< div klase = 'bg-teal-500 p-5' > 1 < / div >
< div klase = 'bg-teal-500 p-5' > 2 < / div >
< div klase = 'bg-teal-500 p-5' > 3 < / div >
< div klase = 'bg-teal-500 p-5' > 4 < / div >
< div klase = 'bg-teal-500 p-5' > 5 < / div >
< div klase = 'bg-teal-500 p-5' > 6 < / div >
< / div >
< / katawan >
dito:
- “ grid ” itinatakda ng klase ang elemento bilang isang lalagyan ng grid.
- “ grid-flow-col ” ay tumutukoy sa daloy ng mga grid item sa mga column.
- “ hover:grid-flow-row Binabago ng klase ang daloy ng mga grid item sa mga hilera kapag ang mouse ay nag-hover sa ibabaw ng lalagyan.
- “ gap-3 ” nagdaragdag ng gap ng 3 unit sa pagitan ng mga grid item.
- “ m-3 ” ay nagdaragdag ng margin na 3 unit sa paligid ng grid container.
- “ text-center ” itina-align sa gitna ang nilalaman ng teksto sa loob ng mga grid item.
Hakbang 2: I-verify ang Output
Upang i-verify na ang hover effect ay nailapat sa grid auto flow, tingnan ang web page, at ilipat ang mouse sa mga grid item:
Mapapansin na sa simula ang daloy ng mga grid item ay nasa mga column at kapag ang mouse ay nag-hover sa ibabaw ng mga ito, ang daloy ay napalitan ng mga hilera. Ipinapahiwatig nito na matagumpay na nailapat ang hover effect sa grid auto flow.
Konklusyon
Para ilapat ang hover effect sa grid auto flow sa Tailwind, gamitin ang “ hover 'klase na may ninanais' grid-flow-