Ipapakita ng artikulong ito ang paraan para ilapat ang hover effect sa column grid sa Tailwind CSS.
Paano Mag-apply ng Hover sa Column Grid sa Tailwind?
Para ilapat ang hover effect sa column grid sa Tailwind, gumawa ng HTML file at gamitin ang “ hover 'klase na may ' grid-cols-
Sundin ang ibinigay na mga hakbang para sa praktikal na pagpapatupad:
Hakbang 1: Gamitin ang Hover Property Gamit ang Column Grid sa HTML Program
Gumawa ng HTML program at gamitin ang “ hover ” ari-arian na may “ grid-cols-
< katawan >
< div klase = 'grid grid-cols-3 hover:grid-cols-5 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 klase = 'bg-teal-500 p-5' > 7 < / div >
< div klase = 'bg-teal-500 p-5' > 8 < / div >
< div klase = 'bg-teal-500 p-5' > 9 < / div >
< div klase = 'bg-teal-500 p-5' > 10 < / div >
< / div >
< / katawan >
Dito, sa parent
- “ grid Ang klase ay ginagamit upang lumikha ng layout ng grid.
- “ grid-cols-3 Tinutukoy ng klase na ang grid ay dapat magkaroon ng 3 magkaparehong laki ng mga column.
- “ hover:grid-cols-5 Tinutukoy ng klase na ang grid ay dapat na baguhin sa 5 magkaparehong laki ng mga column kapag ang isang mouse ay nag-hover sa ibabaw nito.
- “ gap-3 ” Ang klase ay nagtatakda ng spacing ng 3 unit sa pagitan ng bawat grid item.
- “ m-3 ” class ay naglalapat ng margin na 3 unit sa paligid ng grid container.
- “ text-center Itinakda ng klase ang teksto ng bawat grid item sa gitna.
Sa mga elemento ng child
- “ ” ay kumakatawan sa bilang ng mga grid item.
- “ bg-teal-500 ” itinatakda ng klase ang kulay ng teal sa background ng mga grid item.
- “ p-5 ” class ay nagdaragdag ng padding ng 5 unit sa content sa loob ng child
item.Hakbang 2: I-verify ang Output
Upang matiyak na nailapat ang epekto ng hover sa grid ng hanay, tingnan ang web page, at igalaw ang mouse sa mga item ng grid:
Makikita na kapag nag-hover ang mouse sa grid item, nagbabago ang bilang ng mga column. Ipinapahiwatig nito na matagumpay na nailapat ang hover effect sa column grid.
Konklusyon
Para ilapat ang hover effect sa column grid sa Tailwind, gamitin ang “ hover 'klase na may ' grid-cols-
” utility sa HTML program. Binabago nito ang bilang ng mga column sa hover. Upang matiyak ang mga pagbabago, tingnan ang web HTML page at i-hover ang mouse sa mga grid item. Ang artikulong ito ay nagpakita ng paraan upang ilapat ang hover effect sa column grid sa Tailwind CSS.