Cum se aplică „break-inside” la Hover în Tailwind?

Acest articol va exemplifica metoda de aplicare a „break-inside” la hover în Tailwind CSS.

Cum se aplică „break-inside” la Hover în Tailwind?

Pentru a aplica „break-inside” la hover în Tailwind, utilizați proprietatea „hover” cu utilitarul specific „break-inside” pe elementele dorite din programul HTML. Apoi, vizualizați pagina web pentru verificare.

Pentru o demonstrație practică, încercați pașii enumerați mai jos:

Pasul 1: Utilizați proprietatea Hover cu utilitarul „break-inside”.
Creați un program HTML și utilizați „ planare ” proprietate cu utilitatea „break-inside” dorită. De exemplu, am folosit proprietatea hover cu „ spargere-înăuntru-evita-coloană ” utilitar pentru a evita o rupere a coloanei în cadrul elementului

​​la trecerea cu mouse-ul:

Aici:

• „ coloane-2 ” este utilizată pentru a împărți
  în două coloane.
• „ bg-galben-500 ” clasa setează culoarea galbenă pe fundalul
  .
• „ hover:break-inside-avoid-coloană ” din elementul

  indică faptul că atunci când un cursor mouse-ului trece peste, întreruperea coloanei trebuie evitată în cadrul elementului

  .

Pasul 2: Verificați ieșirea
Pentru a verifica dacă utilitarul „break-inside-avoid-column” a fost aplicat cu succes la trecerea cursorului, vizualizați pagina web HTML:

Ieșirea de mai sus arată că atunci când utilizatorul a trecut cu mouse-ul peste elementul dorit, ruperea coloanei din cadrul elementului a fost evitată. Acest lucru indică faptul că „coloana-break-inside-avoid-coloana” a fost aplicată cu succes elementului aflat la hover, conform căruia a fost specificată.

Concluzie

Pentru a aplica „break-inside” la hover în Tailwind, utilizați „ planare ” proprietate cu ” dorit spargere în interior ” utilitar în programul HTML. Proprietatea hover poate fi utilizată cu orice element. Pentru verificare, vizualizați pagina web. Acest articol a explicat metoda de aplicare a „break-inside” la hover în Tailwind CSS.