Tento článek se zabývá postupem implementace pro použití umístění kurzoru a dalších stavů s vlastnostmi viditelnosti pomocí Tailwind CSS.
Jak použít Hover a další stavy pomocí nástroje Viditelnost v Tailwindu?
Obslužný program viditelnosti lze použít při umístění kurzoru a dalších stavech k provedení změn viditelnosti při interakci uživatele. V rámci nástroje viditelnosti existují tři třídy, a to „ viditelné “, “ neviditelný ', a ' kolaps “. Pojďme integrovat některé třídy viditelnosti se stavy přechodu do níže uvedených příkladů pro lepší pochopení.
Příklad 1: Použití stavu visení podél třídy „neviditelné“.
V tomto případě bude vybraný prvek skrytý, když kurzor uživatele najede na prvek, kód je zobrazen níže:
< tělo >
< div třída = 'grid grid-cols-3 gap-4 my-4 mx-4' >
< div třída = 'bg-blue-500 p-3 zaoblený střed textu' > 01 < / div >
< div třída = 'bg-blue-500 p-3 hover:neviditelné zaoblené textové centrum' > 02 < / div >
< div třída = 'bg-blue-500 p-3 zaoblený střed textu' > 03 < / div >
< / div >
< / tělo >
Vysvětlení výše uvedeného kódu:
- Nejprve se vytvoří nadřazený div, který vytvoří třísloupcové rozvržení mřížky s mezerou mezi každým sloupcem a okrajem „ 4px “. Použití CSS Tailwind “ mřížka “, “ grid-cols-3 “, “ mezera “, “ můj ', a ' mx “třídy.
- Dále tři děti“ div ” jsou vytvořeny prvky a je na ně aplikován základní styl.
- Poté, „ vznášet se stav nebo selektor v CSS je přiřazen druhému „div“ a „ neviditelný “ je mu přiřazeno oddělené dvojtečkou “ : ' podepsat. Díky tomu je druhý div neviditelný, když na něj najedete myší.
Náhled webové stránky po fázi realizace:
Výše uvedený gif ukazuje, že druhý div se stává neviditelným při najetí myší.
Příklad 2: Použití aktivního stavu podél třídy „neviditelné“.
Stav „aktivní“ použije styly, když uživatel vybere konkrétní prvek a neodejde. Stejně jako textová pole, když uživatel začne zadávat data do pole, je v tomto okamžiku pole aktivní. Chcete-li lépe porozumět aktivnímu stavu a tomu, jak funguje s třídou „neviditelná“, navštivte níže uvedený kód:
< tělo >< div třída = 'grid grid-cols-3 gap-4 my-4 mx-4' >
< div třída = 'bg-blue-500 p-3 zaoblený střed textu' >01< / div >
< div třída = 'bg-blue-500 p-3 active:neviditelné zaoblené textové centrum' >02< / div >
< div třída = 'bg-blue-500 p-3 zaoblený střed textu' >03< / div >
< / div >
< / tělo >
Ve výše uvedeném kódu je třída „ neviditelný “ je přiřazeno „ aktivní 'uveďte za druhé' div ” aby byl druhý prvek div skrytý, když bude vybrán.
Po spuštění se náhled webové stránky zobrazí takto:
Výše uvedený výstup ukazuje, že když je vybrán druhý „div“, prvek se stane neviditelným.
Závěr
Umístění kurzoru a další stavy, jako je aktivní nebo zaměření, lze použít s třídami poskytovanými obslužným programem viditelnosti k úpravě vlastností viditelnosti pro vybrané prvky. Chcete-li změnit viditelnost prvků při najetí myší, třída hover se používá vedle tříd viditelnosti oddělených barvou jako „ vznášet: viditelné “ nebo „ vznášet se: neviditelný “. Tento blog vysvětluje postup použití stavů přechodu pomocí nástroje viditelnosti.