Hvordan anvender man 'break-inside' på Hover i medvind?

Denne artikel vil eksemplificere metoden til at anvende 'break-inside' på hover i Tailwind CSS.

Hvordan anvender man 'break-inside' på Hover i medvind?

For at anvende 'break-inside' på hover i Tailwind, skal du bruge 'hover'-egenskaben med det specifikke 'break-inside'-værktøj på de ønskede elementer i HTML-programmet. Se derefter websiden for bekræftelse.

For en praktisk demonstration, prøv nedenstående trin:

Trin 1: Brug Hover Property med 'break-inside'-værktøjet
Opret et HTML-program og brug ' svæve ” ejendom med det ønskede “break-inside”-værktøj. For eksempel har vi brugt hover-egenskaben med ' indbrud-undgå-kolonne ”-værktøj til at undgå et kolonneskift i

-elementet ved svævning:

Her:

• “ kolonner-2 Klassen bruges til at opdele
  i to kolonner.
• “ bg-gul-500 ” klasse sætter gul farve til baggrunden for
  .
• “ hover:break-inside-avoid-column ” klasse i

  -elementet angiver, at når en musemarkør svæver over, bør kolonneskiftet undgås i

  -elementet.

Trin 2: Bekræft output
For at kontrollere, om 'break-inside-avoid-column'-værktøjet er blevet anvendt med succes, når du svæver, skal du se HTML-websiden:

Ovenstående output viser, at når brugeren svævede hen over det ønskede element, er kolonnebruddet i elementet blevet undgået. Dette indikerer, at 'break-inside-avoid-column' er blevet anvendt med succes på elementet ved svævning, som det blev specificeret i henhold til.

Konklusion

For at anvende 'break-inside' ved svævning i Tailwind, brug ' svæve ” ejendom med den ønskede ” indbrud ”-værktøjet i HTML-programmet. Svæveegenskaben kan bruges med ethvert element. For verifikation, se websiden. Denne artikel har forklaret metoden til at anvende 'break-inside' på hover i Tailwind CSS.