Ipapakita ng artikulong ito ang paraan para ilapat ang hover effect sa row grid sa Tailwind CSS.
Paano Mag-apply ng Hover sa Row Grid sa Tailwind?
Para ilapat ang hover effect sa row grid sa Tailwind, gumawa ng HTML file at gamitin ang “ hover 'klase na may ' grid-rows-
Tingnan ang ibinigay na mga hakbang para sa praktikal na pagpapatupad:
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 “ grid-rows-
< katawan >
< div klase = 'grid grid-rows-3 hover:grid-rows-5 grid-flow-col 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-rows-3 Tinutukoy ng klase na ang grid ay dapat magkaroon ng 3 pantay na laki ng mga hilera.
- “ hover:grid-rows-5 ” binago ng klase ang grid sa 5 pantay na laki ng mga hilera kapag ang isang mouse ay nag-hover sa ibabaw nito.
- “ grid-flow-col ” inilalagay ng klase ang mga grid item nang pahalang sa mga column.
- “ 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 i-verify na ang hover effect ay nailapat sa row grid, tingnan ang web page, at ilipat ang mouse sa mga grid item:
Mapapansing sa simula ay mayroong 3 row at kapag ang mouse ay nag-hover sa ibabaw nito, ang bilang ng mga row ay naging 5. Ito ay nagpapahiwatig na ang hover effect ay matagumpay na nailapat sa row grid.
Konklusyon
Para ilapat ang hover effect sa row grid sa Tailwind, gamitin ang ' hover 'klase na may ' grid-rows-
” utility sa HTML program. Binabago nito ang bilang ng mga row 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 naglalarawan ng paraan upang ilapat ang hover effect sa rows grid sa Tailwind CSS.