Szövegdekoráció alkalmazása hátszél-lebegéssel, fókuszálással és aktív állapotokkal

Szovegdekoracio Alkalmazasa Hatszel Lebegessel Fokuszalassal Es Aktiv Allapotokkal



Miközben különféle funkciókat épít be a weboldalra vagy a webhelyre, előfordulhat, hogy a programozónak interaktív hivatkozásokat kell hozzáfűznie, amelyek a felhasználói művelet, azaz az egér lebegtetése során válnak szembetűnővé. Ilyen esetekben a különböző állapotoknak megfelelő szövegdíszítés csodákat tesz a webhely kiemelésében.

Ez a blog az alábbi tartalmi területeket fedi le:

Hogyan alkalmazzunk szövegdekorációt Tailwind Hover, Focus és Active State segítségével?

A szöveget a „ szöveg-dekoráció ' ingatlan. Ez a tulajdonság különféle módosító állapotokkal alkalmazható, mint pl. lebeg ', ' fókusz ” és „ aktív ” hogy a felhasználói műveletre megfelelően díszítse a szöveget.





1. példa: Szövegdekoráció alkalmazása „lebegő” állapottal

Ez a példa a ' szöveg-dekoráció ” tulajdonságot úgy, hogy alapértelmezés szerint nem lesz aláhúzva, hanem aláhúzottá válik, amikor az egeret mozgatja:





< html >

< fej >

< meta karakterkészlet = 'utf-8' >

< meta név = 'nézőablak' tartalom = 'width=device-width, kezdeti lépték=1' >

< forgatókönyv src = 'https://cdn.tailwindcss.com' >< / forgatókönyv >< / fej >

< test >

< textarea osztály = 'aláhúzás nélküli hover:aláhúzás' > Ez a Tailwind CSS < / textarea >

< / test >

< / html >

Ezeknek a kódsoroknak megfelelően adja meg a CDN elérési utat a „ ” címkét a Tailwind funkciók használatához. Most alkalmazza a kombinált ' szöveg-dekoráció ' ingatlan a ' lebeg ” állapotát úgy, hogy az elem lebegtetése után aláhúzott legyen.



Kimenet



Mint látható, a „