Tento článek demonstruje postup použití umístění kurzoru s dekorací pole v Tailwindu.
Jak ve službě Tailwind použít přechod na přestávku na zdobení krabice?
Vlastnost CSS „box-decoration-break“ určuje vykreslení pozadí, ohraničení a odsazení prvku, když se rozprostírá přes více řádků nebo sloupců. Chcete-li použít efekt hoveru na prvky přerušení dekorace krabice, je nutné použít „ vznášet se ” a aplikujte na prvky jakýkoli efekt.
Podívejte se na níže uvedené kroky pro praktickou ukázku:
Krok 1: Použijte vlastnost Hover na Box Decoration Break v HTML programu
Vytvořte program HTML a využijte jakoukoli vlastnost hover na prvcích přerušení dekorace boxu. Například jsme použili „ hover:box-decoration-clone vlastnost ” na elementu “box decoration-slice” a “ hover:text-yellow-500 vlastnost ” na elementu “box-decoration-clone”:
< tělo >
< rozpětí třída = 'box-decoration-slice hover:box-decoration-clone bg-teal-600 text-white text-3xl px-2' >
Linux < br / >
Náznak
< / rozpětí >
< br >
< br >
< rozpětí třída = 'box-decoration-clone hover:text-yellow-500 bg-teal-600 text-white text-3xl px-2' >
Linux < br / >
Náznak
< / rozpětí >
< / tělo >
Tady:
- ' hover:box-decoration-clone ” použije efekt „box-decoration-clone“, když na prvek „box decoration-slice“ najedete myší.
- ' hover:text-yellow-500 ” změní barvu textu na žlutou, když najedete myší na prvek „box-decoration-clone“.
Krok 2: Ověřte výstup
Spusťte program HTML a ověřte výstup:
Výše uvedený výstup ukazuje, že efekt hoveru byl aplikován na prvky, podle kterých byl specifikován.
Závěr
Tailwind CSS nabízí sbírku tříd obslužných programů pro aplikaci efektů přechodu na jakýkoli prvek. Chcete-li použít kurzor na prvky přerušení dekorace krabice, použijte „ vznášet se ” a určete efekt v programu HTML. Uživatelé mohou změnit barvu pozadí, barvu textu a barvu ohraničení nebo přidat stín k prvku při najetí myší. V tomto článku je vysvětlen postup použití umístění kurzoru s dekorací pole ve službě Tailwind.