Denne artikkelen omhandler implementeringsprosedyren for å bruke hover og andre tilstander med synlighetsegenskaper ved å bruke Tailwind CSS.
Hvordan bruke hover og andre stater med synlighetsverktøy i medvind?
Synlighetsverktøyet kan brukes langs pekeren og andre tilstander for å gjøre synlighetsendringene ved brukerinteraksjon. Det er tre klasser under synlighetsverktøyet, nemlig ' synlig ', ' usynlig ', og ' kollapse '. La oss integrere noen synlighetsklasser med svevetilstander i eksemplene nedenfor for bedre forståelse.
Eksempel 1: Bruk av svevetilstand langs den 'usynlige' klassen
I dette tilfellet vil det valgte elementet bli skjult når brukerens markør svever over elementet, koden vises nedenfor:
< kropp >
< div klasse = 'grid grid-cols-3 gap-4 my-4 mx-4' >
< div klasse = 'bg-blue-500 p-3 avrundet tekst-senter' > 01 < / div >
< div klasse = 'bg-blue-500 p-3 hover:invisible rounded text-center' > 02 < / div >
< div klasse = 'bg-blue-500 p-3 avrundet tekst-senter' > 03 < / div >
< / div >
< / kropp >
Forklaring av koden ovenfor:
- Først opprettes den overordnede div-en som lager et tre-kolonne rutenettoppsett med et mellomrom mellom hver kolonne og margen på ' 4px '. Bruke Tailwind CSS ' Nett ', ' rutenett-cols-3 ', ' mellomrom ', ' min ', og ' mx henholdsvis 'klasser.
- Deretter tre barn ' div ” elementer opprettes og grunnleggende styling brukes på dem.
- Og så ' sveve '-tilstand eller velger i CSS er tilordnet den andre 'div' og ' usynlig ' er tildelt den atskilt med kolon ' : ' tegn. Dette gjør den andre div usynlig når musen blir svevet over den.
Forhåndsvisning av nettsiden etter utførelsesfasen:
Ovennevnte gif viser at den andre div blir usynlig ved musepeker.
Eksempel 2: Bruk av aktiv tilstand langs den 'usynlige' klassen
Den 'aktive' tilstanden bruker stiler når brukeren velger et spesifikt element og ikke forlater. Akkurat som tekstbokser når en bruker begynner å skrive inn data i feltet, er feltet aktivt på dette tidspunktet. For å få en mer klar forståelse av den aktive tilstanden og hvordan den fungerer med den 'usynlige' klassen, besøk koden nedenfor:
< kropp >< div klasse = 'grid grid-cols-3 gap-4 my-4 mx-4' >
< div klasse = 'bg-blue-500 p-3 avrundet tekst-senter' >01< / div >
< div klasse = 'bg-blue-500 p-3 active:invisible avrundet tekstsenter' >02< / div >
< div klasse = 'bg-blue-500 p-3 avrundet tekst-senter' >03< / div >
< / div >
< / kropp >
I koden ovenfor er klassen ' usynlig ' er tildelt ' aktiv ' stat for den andre ' div ”-element for å gjøre det andre div-elementet skjult når det velges.
Etter utførelsen ser forhåndsvisningen av nettsiden slik ut:
Utgangen ovenfor viser at når den andre 'div' er valgt, blir elementet usynlig.
Konklusjon
Hover og andre tilstander som aktiv eller fokus kan brukes med klassene som tilbys av synlighetsverktøyet for å endre synlighetsegenskapene for de valgte elementene. For å endre synligheten av elementer ved musepeker, brukes hoverklassen langs synlighetsklassene atskilt med fargen som ' hover:synlig ' eller ' hover:usynlig '. Denne bloggen har forklart prosedyren for å bruke hover-tilstander med synlighetsverktøyet.