Šajā rakstā tiks parādīta hover ar kastes dekorēšanas uzklāšanas procedūra Tailwind.
Kā pielikt kursoru uz kastes dekorēšanas pārtraukuma aizmugurējā vējā?
CSS rekvizīts “box-decoration-break” nosaka elementa fona, apmales un polsterējuma renderēšanu, ja tas aptver vairākas līnijas vai kolonnas. Lai izmantotu kursora efektu uz kastes apdares pārtraukuma elementiem, ir jāizmanto ' novietojiet kursoru ” īpašību un piemēro elementiem jebkuru efektu.
Apskatiet tālāk norādītās darbības praktiskajai demonstrācijai:
1. darbība. Izmantojiet kursora rekvizītu lodziņa dekorēšanas pārtraukumā HTML programmā
Izveidojiet HTML programmu un izmantojiet jebkuru kursora novietošanas rekvizītu uz kastes apdares pārtraukuma elementiem. Piemēram, mēs esam piemērojuši “ hover:box-decoration-clone ” rekvizītu elementā “kastes noformējums-šķēlis” un “ kursors: teksts-dzeltens-500 ” rekvizītu elementā “box-decoration-clone”:
< ķermenis >
< span klasē = 'box-decoration-slice hover:box-decoration-clone bg-teal-600 text-white text-3xl px-2' >
Linux < br / >
Padoms
< / span >
< br >
< br >
< span klasē = 'box-decoration-clone hover:text-yellow-500 bg-teal-600 text-white text-3xl px-2' >
Linux < br / >
Padoms
< / span >
< / ķermenis >
Šeit:
- ' hover:box-decoration-clone ” izmanto “kastes dekorācijas klona” efektu, kad tiek virzīts kursors virs elementa “kastes noformējums-šķēlis”.
- ' kursors: teksts-dzeltens-500 ” maina teksta krāsu uz dzeltenu, kad tiek virzīts kursors virs elementa “box-decoration-clone”.
2. darbība: pārbaudiet izvadi
Palaidiet HTML programmu, lai pārbaudītu izvadi:
Iepriekš redzamā izvade parāda, ka pārvietošanas efekts ir piemērots elementiem, saskaņā ar kuriem tas tika norādīts.
Secinājums
Tailwind CSS piedāvā utilītu klašu kolekciju, lai jebkuram elementam piemērotu kursora novietošanas efektus. Lai novietotu kursoru uz kastes dekorācijas pārtraukuma elementiem, izmantojiet ' novietojiet kursoru ” rekvizītu un norādiet efektu HTML programmā. Lietotāji var mainīt fona krāsu, teksta krāsu un apmales krāsu vai pievienot ēnu elementam, novietojot kursoru. Šajā rakstā ir izskaidrota procedūra, kā lietot kursoru ar kastes rotājumu programmā Tailwind.