Ovaj se članak bavi postupkom implementacije za primjenu lebdenja i drugih stanja sa svojstvima vidljivosti pomoću Tailwind CSS-a.
Kako primijeniti lebdenje i druga stanja s uslužnim programom vidljivosti u Tailwindu?
Uslužni program vidljivosti može se koristiti tijekom lebdenja i drugih stanja kako bi se izvršile promjene vidljivosti pri interakciji korisnika. Postoje tri klase ispod uslužnog programa vidljivosti, naime ' vidljivo ”, “ nevidljiv ', i ' kolaps ”. Integrirajmo neke klase vidljivosti sa stanjima lebdenja u donje primjere radi boljeg razumijevanja.
Primjer 1: Primjena stanja lebdenja duž 'nevidljive' klase
U ovom slučaju, odabrani element će biti skriven kada korisnikov pokazivač lebdi iznad elementa, kod je prikazan ispod:
< tijelo >
< div razreda = 'grid grid-cols-3 gap-4 my-4 mx-4' >
< div razreda = 'bg-blue-500 p-3 zaobljeni tekst-centar' > 01 < / div >
< div razreda = 'bg-blue-500 p-3 lebdjenje: nevidljivo zaobljeno središte teksta' > 02 < / div >
< div razreda = 'bg-blue-500 p-3 zaobljeni tekst-centar' > 03 < / div >
< / div >
< / tijelo >
Objašnjenje gornjeg koda:
- Prvo se stvara nadređeni div koji stvara raspored rešetke u tri stupca s razmakom između svakog stupca i marginom od ' 4 px ”. Korištenje Tailwind CSS-a ' rešetka ”, “ grid-cols-3 ”, “ praznina ”, “ moj ', i ' mx ” klase odnosno.
- Dalje, troje djece” div ” stvaraju se elementi i na njih se primjenjuje osnovni stil.
- Onda ' lebdjeti ” stanje ili selektor u CSS-u dodjeljuje se drugom „div” i „ nevidljiv ” dodijeljen mu je odvojen dvotočkom “ : ” znak. Ovo čini drugi div nevidljivim kada se mišem prijeđe iznad njega.
Pregled web stranice nakon faze izvođenja:
Gornji gif pokazuje da drugi div postaje nevidljiv kada lebdite mišem.
Primjer 2: Primjena aktivnog stanja uz 'nevidljivu' klasu
Stanje 'aktivno' primjenjuje stilove kada korisnik odabere određeni element i ne napušta ga. Baš kao i tekstualni okviri kada korisnik počne unositi podatke unutar polja, u ovom trenutku polje je aktivno. Da biste jasnije razumjeli aktivno stanje i kako ono funkcionira s klasom 'nevidljivo', posjetite donji kod:
< tijelo >< div razreda = 'grid grid-cols-3 gap-4 my-4 mx-4' >
< div razreda = 'bg-blue-500 p-3 zaobljeni tekst-centar' >01< / div >
< div razreda = 'bg-blue-500 p-3 aktivan: nevidljivo zaobljeno središte teksta' >02< / div >
< div razreda = 'bg-blue-500 p-3 zaobljeni tekst-centar' >03< / div >
< / div >
< / tijelo >
U gornjem kodu, klasa ' nevidljiv ' dodijeljen je ' aktivan ” država za drugu “ div ” kako bi drugi div element bio skriven kada se odabere.
Nakon izvršenja, pregled web-stranice izgleda ovako:
Gornji izlaz pokazuje da kada se odabere drugi 'div', element postaje nevidljiv.
Zaključak
Lebdenje i druga stanja poput aktivnog ili fokusa mogu se koristiti s klasama koje pruža uslužni program vidljivosti za izmjenu svojstava vidljivosti za odabrane elemente. Za promjenu vidljivosti elemenata pri lebdenju mišem, klasa lebdenja koristi se uz klase vidljivosti odvojene bojom poput ' lebdjeti: vidljivo ' ili ' lebdjeti: nevidljiv ”. Ovaj je blog objasnio postupak primjene stanja lebdenja pomoću uslužnog programa vidljivosti.