Paano Mag-apply ng 'break-inside' sa Hover sa Tailwind?

Ipapakita ng artikulong ito ang paraan ng paglalapat ng 'break-inside' sa pag-hover sa Tailwind CSS.

Paano Mag-apply ng 'break-inside' sa Hover sa Tailwind?

Upang ilapat ang 'break-inside' sa hover sa Tailwind, gamitin ang 'hover' na property na may partikular na 'break-inside' na utility sa mga gustong elemento sa HTML program. Pagkatapos, tingnan ang web page para sa pag-verify.

Para sa isang praktikal na demonstrasyon, subukan ang mga hakbang na nakalista sa ibaba:

Hakbang 1: Gamitin ang Hover Property Gamit ang Utility na 'break-inside'.
Lumikha ng isang HTML program at gamitin ang ' hover ” ari-arian na may gustong 'break-inside' na utility. Halimbawa, ginamit namin ang hover property na may ' break-inside-avoid-column ” utility upang maiwasan ang isang column break sa loob ng

na elemento sa hover:

dito:

• “ column-2 Ang klase ng ” ay ginagamit upang hatiin ang
  sa dalawang column.
• “ bg-dilaw-500 Ang klase ng ” ay nagtatakda ng dilaw na kulay sa background ng
  .
• “ hover:break-inside-avoid-column Ang klase ng ” sa

  na elemento ay nagpapahiwatig na kapag ang isang mouse pointer ay nag-hover, ang column break ay dapat na iwasan sa loob ng

  na elemento.

Hakbang 2: I-verify ang Output
Upang ma-verify kung matagumpay na nailapat sa hover ang utility na 'break-inside-avoid-column', tingnan ang HTML web page:

Ipinapakita ng output sa itaas na kapag nag-hover ang user sa gustong elemento, naiwasan ang column break sa loob ng elemento. Ipinapahiwatig nito na ang 'break-inside-avoid-column' ay matagumpay na nailapat sa elementong naka-hover ayon sa kung saan ito tinukoy.

Konklusyon

Upang ilapat ang 'break-inside' sa hover sa Tailwind, gamitin ang ' hover ' ari-arian na may ninanais ' break-inside ” utility sa HTML program. Maaaring gamitin ang hover property sa anumang elemento. Para sa pag-verify, tingnan ang web page. Ipinaliwanag ng artikulong ito ang paraan ng paglalapat ng 'break-inside' sa hover sa Tailwind CSS.