Hoe 'break-inside' toepassen op Hover in Tailwind?

Dit artikel illustreert de methode om 'break-inside' toe te passen bij zweven in Tailwind CSS.

Hoe 'break-inside' toepassen op Hover in Tailwind?

Om de 'break-inside' toe te passen bij zweven in Tailwind, gebruikt u de 'hover'-eigenschap met het specifieke 'break-inside'-hulpprogramma op de gewenste elementen in het HTML-programma. Bekijk vervolgens de webpagina ter verificatie.

Probeer voor een praktische demonstratie de onderstaande stappen uit:

Stap 1: gebruik Hover Property met het hulpprogramma 'break-inside'.
Maak een HTML-programma en gebruik de ' zweven woning met de gewenste inbraakvoorziening. We hebben bijvoorbeeld de eigenschap hover gebruikt met de ' break-inside-vermijd-column ” hulpprogramma om een ​​kolomeinde binnen het

-element bij zweven te voorkomen:

Hier:

• “ kolommen-2 ” klasse wordt gebruikt om de
  in twee kolommen te verdelen.
• “ bg-geel-500 ” klasse stelt de gele kleur in op de achtergrond van de
  .
• “ hover:break-inside-avoid-column De klasse ” in het

  -element geeft aan dat wanneer een muisaanwijzer erover zweeft, het kolomeinde binnen het

  -element moet worden vermeden.

Stap 2: uitvoer verifiëren
Bekijk de HTML-webpagina om te controleren of het hulpprogramma 'break-inside-avoid-column' met succes is toegepast bij het plaatsen van de muisaanwijzer:

De bovenstaande uitvoer laat zien dat wanneer de gebruiker met de muis over het gewenste element zweefde, de kolomonderbreking binnen het element is vermeden. Dit geeft aan dat de 'break-inside-avoid-column' met succes is toegepast op het element bij zweven volgens welke het was gespecificeerd.

Conclusie

Om de 'break-inside' toe te passen bij zweven in Tailwind, gebruikt u de ' zweven ” woning met de gewenste “ inbraak ” hulpprogramma in het HTML-programma. De eigenschap hover kan met elk element worden gebruikt. Bekijk de webpagina voor verificatie. Dit artikel heeft de methode uitgelegd om 'break-inside' toe te passen bij zweven in Tailwind CSS.