Ang artikulong ito ay tumatalakay sa pamamaraan ng pagpapatupad upang ilapat ang hover at iba pang mga estado na may mga katangian ng visibility gamit ang Tailwind CSS.
Paano Mag-apply ng Hover at Iba Pang Mga Estado na May Visibility Utility sa Tailwind?
Maaaring gamitin ang visibility utility sa kahabaan ng hover at iba pang mga estado upang gawin ang mga pagbabago sa visibility sa pakikipag-ugnayan ng user. May tatlong klase sa ilalim ng visibility utility na ' nakikita ”, “ hindi nakikita ”, at “ pagbagsak ”. Isama natin ang ilang mga klase ng visibility sa mga estado ng hover sa mga halimbawa sa ibaba para sa mas mahusay na pag-unawa.
Halimbawa 1: Paglalapat ng Hover State Kasama ang 'invisible' Class
Sa kasong ito, itatago ang napiling elemento kapag nag-hover ang cursor ng user sa elemento, ipinapakita ang code sa ibaba:
< katawan >
< div klase = 'grid grid-cols-3 gap-4 my-4 mx-4' >
< div klase = 'bg-blue-500 p-3 rounded text-center' > 01 < / div >
< div klase = 'bg-blue-500 p-3 hover:invisible rounded text-center' > 02 < / div >
< div klase = 'bg-blue-500 p-3 rounded text-center' > 03 < / div >
< / div >
< / katawan >
Paliwanag ng code sa itaas:
- Una, ang parent div ay nilikha na lumilikha ng tatlong-column grid layout na may puwang sa pagitan ng bawat column at ang margin ng ' 4px ”. Gamit ang Tailwind CSS “ grid ”, “ grid-cols-3 ”, “ gap ”, “ aking ”, at “ mx ” klase ayon sa pagkakasunod.
- Susunod, tatlong anak' div ” ang mga elemento ay nilikha at ang pangunahing estilo ay inilalapat sa kanila.
- Pagkatapos, ang ' hover Ang ” state o selector sa CSS ay itinalaga sa pangalawang “div” at ang “ hindi nakikita ' ay itinalaga dito na pinaghihiwalay ng colon ' : ' tanda. Ginagawa nitong hindi nakikita ang pangalawang div kapag na-hover ang mouse sa ibabaw nito.
Preview ng webpage pagkatapos ng yugto ng pagpapatupad:
Ang gif sa itaas ay nagpapakita na ang pangalawang div ay nagiging invisible sa mouse hover.
Halimbawa 2: Paglalapat ng Aktibong Estado Kasama ang 'invisible' na Klase
Ang 'aktibo' na estado ay naglalapat ng mga istilo kapag ang user ay pumili ng isang partikular na elemento at hindi umalis. Tulad ng mga text box kapag nagsimula ang isang user na magpasok ng data sa loob ng field, sa oras na ito aktibo ang field. Upang makakuha ng mas malinaw na pag-unawa sa aktibong estado at kung paano ito gumagana sa klase na 'hindi nakikita', bisitahin ang code sa ibaba:
< katawan >< div klase = 'grid grid-cols-3 gap-4 my-4 mx-4' >
< div klase = 'bg-blue-500 p-3 rounded text-center' >01< / div >
< div klase = 'bg-blue-500 p-3 active:invisible rounded text-center' >02< / div >
< div klase = 'bg-blue-500 p-3 rounded text-center' >03< / div >
< / div >
< / katawan >
Sa code sa itaas, ang klase ng ' hindi nakikita ' ay itinalaga sa ' aktibo 'estado para sa pangalawa' div ” element para gawing nakatago ang pangalawang div element kapag napili ito.
Pagkatapos ng pagpapatupad, ang preview ng webpage ay lilitaw tulad nito:
Ang output sa itaas ay nagpapakita na kapag ang pangalawang 'div' ay pinili ang elemento ay nagiging invisible.
Konklusyon
Ang hover at iba pang mga estado tulad ng aktibo o focus ay maaaring gamitin sa mga klase na ibinigay ng visibility utility upang baguhin ang mga katangian ng visibility para sa mga napiling elemento. Upang baguhin ang visibility ng mga elemento sa mouse hover, ang hover class ay ginagamit kasama ng visibility classes na pinaghihiwalay ng kulay tulad ng “ hover: nakikita 'o' hover:invisible ”. Ipinaliwanag ng blog na ito ang pamamaraan para ilapat ang mga estado ng hover gamit ang visibility utility.