Ta članek obravnava postopek implementacije za uporabo lebdenja in drugih stanj z lastnostmi vidnosti z uporabo Tailwind CSS.
Kako uporabiti lebdenje in druga stanja s pripomočkom Visibility Utility v Tailwind?
Pripomoček za vidnost se lahko uporablja ob lebdenju in drugih stanjih za spreminjanje vidnosti med interakcijo uporabnika. Pod pripomočkom za vidnost so trije razredi, in sicer » viden ”, “ neviden «, in » kolaps ”. Integrirajmo nekaj razredov vidnosti s stanji lebdenja v spodnjih primerih za boljše razumevanje.
Primer 1: Uporaba stanja lebdenja vzdolž »nevidnega« razreda
V tem primeru bo izbrani element skrit, ko se bo kazalec uporabnika pomaknil nad element, koda je prikazana spodaj:
< telo >
< div razred = 'grid grid-cols-3 gap-4 my-4 mx-4' >
< div razred = 'bg-blue-500 p-3 zaokroženo besedilno središče' > 01 < / div >
< div razred = 'bg-blue-500 p-3 hover: nevidno zaokroženo središče besedila' > 02 < / div >
< div razred = 'bg-blue-500 p-3 zaokroženo besedilno središče' > 03 < / div >
< / div >
< / telo >
Razlaga zgornje kode:
- Najprej se ustvari nadrejeni div, ki ustvari postavitev mreže s tremi stolpci, ki ima med vsakim stolpcem presledek in rob ' 4px ”. Uporaba Tailwind CSS ' mreža ”, “ grid-cols-3 ”, “ vrzel ”, “ moj «, in » mx ” razredov oz.
- Naprej, trije otroci ' div ” so ustvarjeni elementi in zanje je uporabljen osnovni slog.
- Potem, ' lebdeti « ali izbirnik v CSS je dodeljen drugemu »div« in » neviden ” mu je dodeljeno ločeno z dvopičjem „ : ” znak. Zaradi tega je drugi div neviden, ko se z miško pomaknete nad njim.
Predogled spletne strani po izvedbeni fazi:
Zgornji gif prikazuje, da drugi div postane neviden ob lebdenju miške.
Primer 2: Uporaba aktivnega stanja vzdolž »nevidnega« razreda
Stanje »aktivno« uporablja sloge, ko uporabnik izbere določen element in ga ne zapusti. Tako kot besedilna polja, ko uporabnik začne vnašati podatke v polje, je polje v tem trenutku aktivno. Če želite bolj jasno razumeti aktivno stanje in kako deluje z 'nevidnim' razredom, obiščite spodnjo kodo:
< telo >< div razred = 'grid grid-cols-3 gap-4 my-4 mx-4' >
< div razred = 'bg-blue-500 p-3 zaokroženo besedilno središče' >01< / div >
< div razred = 'bg-blue-500 p-3 aktiven: nevidno zaokroženo besedilno središče' >02< / div >
< div razred = 'bg-blue-500 p-3 zaokroženo besedilno središče' >03< / div >
< / div >
< / telo >
V zgornji kodi je razred ' neviden « je dodeljen » aktivna 'stanje za drugo' div ”, da bo drugi element div skrit, ko bo izbran.
Po izvedbi se predogled spletne strani prikaže takole:
Zgornji izhod kaže, da ko je izbran drugi »div«, element postane neviden.
Zaključek
Lebdenje in druga stanja, kot sta aktivno ali fokus, lahko uporabite z razredi, ki jih ponuja pripomoček za vidnost, da spremenite lastnosti vidnosti za izbrane elemente. Če želite spremeniti vidnost elementov pri lebdenju miške, se razred lebdenja uporablja vzdolž razredov vidnosti, ločenih z barvo, kot je ' lebdenje: vidno « ali » lebdenje: nevidno ”. Ta blog je razložil postopek za uporabo stanj lebdenja s pripomočkom za vidnost.