Cum se aplică Hover pe pauza de decorare cutie în Tailwind?

Acest articol va demonstra procedura de aplicare a hoverului cu decorarea casetei în Tailwind.

Cum se aplică Hover pe pauza de decorare cutie în Tailwind?

Proprietatea CSS „box-decoration-break” determină redarea fundalului, a chenarului și a umpluturii pentru un element atunci când acesta se întinde pe mai multe linii sau coloane. Pentru a aplica efectul de hover pe elementele de rupere a decorațiunii cutiei, este necesar să utilizați „ planare ” proprietate și aplică orice efect elementelor.

Consultați pașii furnizați mai jos pentru o demonstrație practică:

Pasul 1: Utilizați proprietatea Hover pe Box Decoration Break în programul HTML

Creați un program HTML și utilizați orice proprietate hover pe elementele de pauză de decorare a casetei. De exemplu, am aplicat un „ hover:box-decor-clone ” pe elementul „box decoration-slice” și un „ hover:text-galben-500 ” proprietatea elementului „box-decoration-clone”:

Aici:

• „ hover:box-decor-clone ” aplică un efect „cutie-decorare-clonă” atunci când elementul „decor cutie-slice” este plasat deasupra.
• „ hover:text-galben-500 ” schimbă culoarea textului în galben atunci când elementul „box-decoration-clone” este plasat deasupra.

Pasul 2: Verificați ieșirea

Rulați programul HTML pentru a verifica rezultatul:

Rezultatul de mai sus arată că efectul de hover a fost aplicat elementelor conform cărora a fost specificat.

Concluzie

Tailwind CSS oferă o colecție de clase de utilitate pentru a aplica efecte de hover oricărui element. Pentru a aplica un hover pe elementele de pauză de decorare a cutiei, utilizați „ planare ” și specificați efectul în programul HTML. Utilizatorii pot schimba culoarea de fundal, culoarea textului și culoarea chenarului sau pot adăuga o umbră unui element la trecerea cursorului. Acest articol a explicat procedura de aplicare a hoverului cu decorarea casetei în Tailwind.