Hvordan bruke 'break-inside' på Hover i medvind?

Denne artikkelen vil eksemplifisere metoden for å bruke 'break-inside' på hover i Tailwind CSS.

Hvordan bruke 'break-inside' på Hover i medvind?

For å bruke 'break-inside' på hover i Tailwind, bruk 'hover'-egenskapen med det spesifikke 'break-inside'-verktøyet på de ønskede elementene i HTML-programmet. Se deretter nettsiden for bekreftelse.

For en praktisk demonstrasjon, prøv trinnene nedenfor:

Trinn 1: Bruk Hover Property med 'break-inside'-verktøyet
Lag et HTML-program og bruk ' sveve ” eiendom med ønsket “break-inside”-verktøy. For eksempel har vi brukt hover-egenskapen med ' innbrudd-unngå-kolonne '-verktøyet for å unngå et kolonneskift i

-elementet når du holder musepekeren:

Her:

• ' kolonner-2 Klassen brukes til å dele
  i to kolonner.
• ' bg-gul-500 ” klasse setter gul farge til bakgrunnen til
  .
• ' hover:break-inside-avoid-column ” klasse i

  -elementet indikerer at når en musepeker svever over, bør kolonneskiftet unngås i

  -elementet.

Trinn 2: Bekreft utdata
For å bekrefte om 'break-inside-avoid-column'-verktøyet har blitt brukt på en vellykket måte ved sveving, se HTML-nettsiden:

Ovennevnte utdata viser at når brukeren holdt pekeren over ønsket element, har kolonnebruddet i elementet blitt unngått. Dette indikerer at 'break-inside-avoid-column' har blitt brukt på elementet ved hover som det ble spesifisert i henhold til.

Konklusjon

For å bruke 'break-inside' på hover i Tailwind, bruk ' sveve ' eiendom med ønsket ' innbrudd '-verktøyet i HTML-programmet. Hover-egenskapen kan brukes med hvilket som helst element. For verifisering, se nettsiden. Denne artikkelen har forklart metoden for å bruke 'break-inside' på hover i Tailwind CSS.