Denne artikel omhandler implementeringsproceduren til at anvende hover og andre tilstande med synlighedsegenskaber ved hjælp af Tailwind CSS.
Hvordan anvender man hover og andre stater med synlighedsværktøj i medvind?
Synlighedsværktøjet kan bruges langs hoveren og andre tilstande til at foretage synlighedsændringer på brugerinteraktion. Der er tre klasser under synlighedsværktøjet, nemlig ' synlig ', ' usynlig ', og ' bryder sammen ”. Lad os integrere nogle synlighedsklasser med svævetilstande i nedenstående eksempler for bedre forståelse.
Eksempel 1: Anvendelse af svævetilstand langs den 'usynlige' klasse
I dette tilfælde vil det valgte element blive skjult, når brugerens markør svæver over elementet, koden er vist nedenfor:
< legeme >
< div klasse = 'grid grid-cols-3 gap-4 my-4 mx-4' >
< div klasse = 'bg-blue-500 p-3 afrundet tekst-center' > 01 < / div >
< div klasse = 'bg-blue-500 p-3 hover:invisible rounded text-center' > 02 < / div >
< div klasse = 'bg-blue-500 p-3 afrundet tekst-center' > 03 < / div >
< / div >
< / legeme >
Forklaring af ovenstående kode:
- Først oprettes den overordnede div, som skaber et tre-søjlet gitterlayout med et mellemrum mellem hver kolonne og marginen på ' 4px ”. Brug af Tailwind CSS ' gitter ', ' grid-cols-3 ', ' hul ', ' min ', og ' mx ” klasser hhv.
- Dernæst tre børn ' div ” elementer skabes, og grundlæggende styling anvendes på dem.
- Derefter ' svæve '-tilstand eller vælger i CSS er tildelt den anden 'div' og ' usynlig ' er tildelt det adskilt af kolon ' : ' skilt. Dette gør den anden div usynlig, når musen bliver svævet over den.
Forhåndsvisning af websiden efter udførelsesfasen:
Ovenstående gif viser, at den anden div bliver usynlig ved musebevægelse.
Eksempel 2: Anvendelse af aktiv tilstand langs den 'usynlige' klasse
Den 'aktive' tilstand anvender stilarter, når brugeren vælger et specifikt element og ikke forlader. Ligesom tekstbokse, når en bruger begynder at indtaste data i feltet, er feltet aktivt på dette tidspunkt. For at få en mere klar forståelse af den aktive tilstand, og hvordan den fungerer med den 'usynlige' klasse, besøg nedenstående kode:
< legeme >< div klasse = 'grid grid-cols-3 gap-4 my-4 mx-4' >
< div klasse = 'bg-blue-500 p-3 afrundet tekst-center' >01< / div >
< div klasse = 'bg-blue-500 p-3 active:invisible afrundet tekst-center' >02< / div >
< div klasse = 'bg-blue-500 p-3 afrundet tekst-center' >03< / div >
< / div >
< / legeme >
I ovenstående kode er klassen ' usynlig ' er tildelt ' aktiv ' tilstand for den anden ' div ” element for at gøre det andet div-element skjult, når det bliver valgt.
Efter udførelsen ser forhåndsvisningen af websiden således ud:
Ovenstående output viser, at når den anden 'div' er valgt, bliver elementet usynligt.
Konklusion
Hover og andre tilstande som aktiv eller fokus kan bruges sammen med klasserne, der leveres af synlighedsværktøjet til at ændre synlighedsegenskaberne for de valgte elementer. For at ændre synligheden af elementer ved musehovering, bruges hoverklassen langs synlighedsklasserne adskilt af farven som ' hover:synlig ' eller ' hover:usynlig ”. Denne blog har forklaret proceduren for at anvende hover-tilstande med synlighedsværktøjet.