Hur applicerar man 'break-inside' på Hover i Tailwind?

Den här artikeln kommer att exemplifiera metoden för att tillämpa 'break-inside' vid hovring i Tailwind CSS.

Hur applicerar man 'break-inside' på Hover i Tailwind?

För att tillämpa 'break-inside' på hover i Tailwind, använd egenskapen 'hover' med det specifika 'break-inside'-verktyget på de önskade elementen i HTML-programmet. Se sedan webbsidan för verifiering.

För en praktisk demonstration, prova stegen nedan:

Steg 1: Använd Hover Property med 'break-inside'-verktyget
Skapa ett HTML-program och använd ' sväva ” egendom med önskat ”break-inside”-verktyg. Till exempel har vi använt hovringsegenskapen med ' inbrott-undvik-kolumn ”-verktyg för att undvika kolumnbrytning inom

-elementet när du håller muspekaren:

Här:

• ' kolumner-2 Klassen används för att dela upp
  i två kolumner.
• ' bg-gul-500 ” klass anger gul färg till bakgrunden av
  .
• ' hover:break-inside-avoid-column ” klass i

  -elementet indikerar att när en muspekare svävar över, bör kolumnbrytningen undvikas inom

  -elementet.

Steg 2: Verifiera utdata
För att verifiera om verktyget 'break-inside-avoid-column' har använts framgångsrikt när du håller muspekaren, titta på HTML-webbsidan:

Ovanstående utdata visar att när användaren svävade över det önskade elementet har kolumnbrytningen inom elementet undvikits. Detta indikerar att 'break-inside-avoid-column' har applicerats framgångsrikt på elementet vid hovring som det specificerades enligt.

Slutsats

För att tillämpa 'break-inside' vid hovring i Tailwind, använd ' sväva ' egendom med önskad ' inbrott ”-verktyget i HTML-programmet. Hover-egenskapen kan användas med vilket element som helst. För verifiering, se webbsidan. Den här artikeln har förklarat metoden för att tillämpa 'break-inside' vid hovring i Tailwind CSS.