W tym artykule zademonstrujemy procedurę nakładania najechania z dekoracją pudełka w Tailwind.
Jak zastosować najechanie na przerwę w dekoracji pudełka w Tailwind?
Właściwość CSS „box-decoration-break” określa renderowanie tła, obramowania i wypełnienia dla elementu, gdy obejmuje on wiele wierszy lub kolumn. Aby zastosować efekt najechania na elementy przerwania dekoracji pudełka, wymagane jest użycie „ unosić się ” i zastosować dowolny efekt do elementów.
Zapoznaj się z poniższymi krokami w celu praktycznej demonstracji:
Krok 1: Użyj właściwości Hover na przerwaniu dekoracji pudełka w programie HTML
Utwórz program HTML i wykorzystaj dowolną właściwość hover na elementach przerywających dekorację pudełka. Na przykład zastosowaliśmy „ hover:klon-dekoracji-pudełka ” na elemencie „dekoracja pudełka-plasterek” i „ hover:tekst-żółty-500 ” w elemencie „box-decoration-clone”:
< ciało >
< Zakres klasa = „dekoracja-pudełka po najechaniu kursorem: klon dekoracji pudełka bg-turkusowy-600 tekst-biały tekst-3xl px-2” >
Linuks < br / >
Wskazówka
< / Zakres >
< br >
< br >
< Zakres klasa = 'pudełko-decoration-clone hover:text-yellow-500 bg-turkusowy-600 text-white text-3xl px-2' >
Linuks < br / >
Wskazówka
< / Zakres >
< / ciało >
Tutaj:
- „ hover:klon-dekoracji-pudełka ” stosuje efekt „dekoracji pudełka” po najechaniu kursorem na element „dekoracji pudełka”.
- „ hover:tekst-żółty-500 ” zmienia kolor tekstu na żółty po najechaniu kursorem na element „box-decoration-clone”.
Krok 2: Sprawdź dane wyjściowe
Uruchom program HTML, aby zweryfikować dane wyjściowe:
Powyższe wyjście pokazuje, że efekt hover został zastosowany do elementów, według których został określony.
Wniosek
Tailwind CSS oferuje kolekcję klas narzędzi, które pozwalają zastosować efekty najechania kursorem na dowolny element. Aby zastosować najechanie kursorem na przerywane elementy dekoracji pudełka, użyj opcji „ unosić się ” i określ efekt w programie HTML. Użytkownicy mogą zmienić kolor tła, kolor tekstu i kolor obramowania lub dodać cień do elementu po najechaniu kursorem. W tym artykule wyjaśniono procedurę nakładania najechania z dekoracją pudełka w Tailwind.