Ako použiť dekoráciu textu pomocou kurzora Tailwind, zamerania a aktívnych stavov

Ako Pouzit Dekoraciu Textu Pomocou Kurzora Tailwind Zamerania A Aktivnych Stavov



Pri začleňovaní rôznych funkcií na webovú stránku alebo web existujú prípady, keď programátor potrebuje pridať interaktívne odkazy, ktoré sa stanú viditeľnými pri akcii používateľa, t. j. po prejdení myšou. V takýchto scenároch, zdobenie textu v súlade s rôznymi stavmi robí zázraky v tom, aby stránka vynikla.

Tento blog sa zaoberá nasledujúcimi oblasťami obsahu:

Ako použiť zdobenie textu pomocou kurzora Tailwind, zaostrenia a aktívnych stavov?

Text je možné ozdobiť pomocou „ text-dekorácia ' nehnuteľnosť. Túto vlastnosť možno použiť s rôznymi stavmi modifikátora, ako napríklad „ vznášať sa ',' zameranie “ a „ aktívny “, aby ste zodpovedajúcim spôsobom ozdobili text podľa akcie používateľa.





Príklad 1: Použitie dekorácie textu so stavom „vznášania“.

Tento príklad platí „ text-dekorácia ” vlastnosť tak, že predvolene nie je podčiarknutá, ale podčiarkne sa po umiestnení kurzora myši:





< html >

< hlavu >

< meta znakovú sadu = 'utf-8' >

< meta názov = 'výrez' obsahu = 'width=device-width, initial-scale=1' >

< skript src = 'https://cdn.tailwindcss.com' < / skript < / hlavu >

< telo >

< textarea trieda = 'bez podčiarknutia hover:podčiarknutie' > Toto je CSS Tailwind < / textarea >

< / telo >

< / html >

Podľa týchto riadkov kódu zadajte cestu CDN v rámci „ “, aby ste mohli využívať funkcie Tailwind. Teraz použite kombináciu „ text-dekorácia “vlastnosť spolu s “ vznášať sa ” uveďte tak, že po umiestnení kurzora na prvok sa podčiarkne.



Výkon



Ako je vidieť, „