Dit artikel behandelt de implementatieprocedure voor het toepassen van hover en andere statussen met zichtbaarheidseigenschappen met behulp van Tailwind CSS.
Hoe Hover en andere staten toepassen met Visibility Utility in Tailwind?
Het hulpprogramma voor zichtbaarheid kan worden gebruikt langs de muisaanwijzer en andere statussen om de zichtbaarheid van gebruikersinteractie te wijzigen. Er zijn drie klassen onder het zichtbaarheidshulpprogramma, namelijk ' zichtbaar ”, “ onzichtbaar ', En ' instorten ”. Laten we enkele zichtbaarheidsklassen integreren met zweeftoestanden in de onderstaande voorbeelden voor een beter begrip.
Voorbeeld 1: Hover State toepassen langs de 'onzichtbare' klasse
In dit geval wordt het geselecteerde element verborgen wanneer de cursor van de gebruiker over het element zweeft, de code wordt hieronder weergegeven:
< lichaam >
< div klas = 'grid grid-cols-3 gap-4 my-4 mx-4' >
< div klas = 'bg-blauw-500 p-3 afgerond tekstcentrum' > 01 < / div >
< div klas = 'bg-blue-500 p-3 hover:onzichtbaar afgerond tekstcentrum' > 02 < / div >
< div klas = 'bg-blauw-500 p-3 afgerond tekstcentrum' > 03 < / div >
< / div >
< / lichaam >
Uitleg van de bovenstaande code:
- Eerst wordt de bovenliggende div gemaakt die een rasterlay-out met drie kolommen creëert met een spatie tussen elke kolom en de marge van ' 4px ”. De Tailwind-CSS gebruiken ' rooster ”, “ grid-cols-3 ”, “ gat ”, “ Mijn ', En ' mx ” klassen respectievelijk.
- Volgende, drie kind “ div Er worden elementen gemaakt en er wordt basisstyling op toegepast.
- Dan de ' zweven ” state of selector in CSS is toegewezen aan de tweede “div” en de “ onzichtbaar ' wordt eraan toegewezen, gescheiden door de dubbele punt ' : ' teken. Dit maakt de tweede div onzichtbaar wanneer de muis erover beweegt.
Preview van de webpagina na de uitvoeringsfase:
De bovenstaande gif laat zien dat de tweede div onzichtbaar wordt bij muisaanwijzer.
Voorbeeld 2: Active State toepassen langs de 'onzichtbare' klasse
De status 'actief' past stijlen toe wanneer de gebruiker een specifiek element selecteert en niet verlaat. Net als tekstvakken wanneer een gebruiker begint met het invoeren van gegevens in het veld, is het veld op dit moment actief. Ga naar de onderstaande code om een beter begrip te krijgen van de actieve status en hoe deze werkt met de 'onzichtbare' klasse:
< lichaam >< div klas = 'grid grid-cols-3 gap-4 my-4 mx-4' >
< div klas = 'bg-blauw-500 p-3 afgerond tekstcentrum' >01< / div >
< div klas = 'bg-blue-500 p-3 actief: onzichtbaar afgerond tekstcentrum' >02< / div >
< div klas = 'bg-blauw-500 p-3 afgerond tekstcentrum' >03< / div >
< / div >
< / lichaam >
In de bovenstaande code is de klasse van ' onzichtbaar ” is toegewezen aan de “ actief 'staat voor de tweede' div ”-element om het tweede div-element te verbergen wanneer het wordt geselecteerd.
Na de uitvoering ziet het voorbeeld van de webpagina er als volgt uit:
De bovenstaande uitvoer laat zien dat wanneer de tweede 'div' wordt geselecteerd, het element onzichtbaar wordt.
Conclusie
De zweeftekst en andere statussen zoals actief of focus kunnen worden gebruikt met de klassen die worden geleverd door het zichtbaarheidshulpprogramma om de zichtbaarheidseigenschappen voor de geselecteerde elementen te wijzigen. Om de zichtbaarheid van elementen bij muisaanwijzer te wijzigen, wordt de aanwijsklasse gebruikt naast de zichtbaarheidsklassen gescheiden door de kleur zoals ' zweven: zichtbaar ' of ' zweven: onzichtbaar ”. Deze blog heeft de procedure uitgelegd om zweeftoestanden toe te passen met het zichtbaarheidshulpprogramma.