Tento článok sa zaoberá postupom implementácie na použitie kurzora myši a iných stavov s vlastnosťami viditeľnosti pomocou CSS Tailwind.
Ako použiť Hover a ďalšie stavy pomocou nástroja Viditeľnosť v Tailwinde?
Pomôcku viditeľnosti je možné použiť pri umiestnení kurzora myši a iných stavoch na vykonanie zmien viditeľnosti pri interakcii používateľa. V rámci nástroja viditeľnosti existujú tri triedy, a to „ viditeľné “, “ neviditeľný “ a „ kolaps “. Poďme integrovať niektoré triedy viditeľnosti so stavmi vznášania v nižšie uvedených príkladoch pre lepšie pochopenie.
Príklad 1: Použitie stavu vznášania pozdĺž triedy „neviditeľné“.
V tomto prípade sa vybraný prvok skryje, keď kurzor používateľa prejde nad prvkom, kód je zobrazený nižšie:
< telo >
< div trieda = 'grid grid-cols-3 gap-4 my-4 mx-4' >
< div trieda = 'bg-blue-500 p-3 zaoblené centrum textu' > 01 < / div >
< div trieda = 'bg-blue-500 p-3 hover:neviditeľné zaoblené textové centrum' > 02 < / div >
< div trieda = 'bg-blue-500 p-3 zaoblené centrum textu' > 03 < / div >
< / div >
< / telo >
Vysvetlenie vyššie uvedeného kódu:
- Najprv sa vytvorí nadradený div, ktorý vytvorí rozloženie mriežky s tromi stĺpcami s medzerou medzi každým stĺpcom a okrajom „ 4px “. Používanie Tailwind CSS “ mriežka “, “ grid-cols-3 “, “ medzera “, “ môj “ a „ mx “triedy resp.
- Ďalej, tri deti“ div ” sú vytvorené prvky a je na ne aplikovaný základný styling.
- Potom ' vznášať sa ” stav alebo selektor v CSS je priradený k druhému “div” a “ neviditeľný “ je k nemu priradený oddelený dvojbodkou “ : znak “. Vďaka tomu je druhý div neviditeľný, keď naň umiestnite myš.
Náhľad webovej stránky po realizačnej fáze:
Vyššie uvedený gif ukazuje, že druhý div sa stáva neviditeľným po umiestnení kurzora myši.
Príklad 2: Aplikácia aktívneho stavu pozdĺž „neviditeľnej“ triedy
Stav „aktívny“ aplikuje štýly, keď používateľ vyberie konkrétny prvok a neodíde. Rovnako ako textové polia, keď používateľ začne zadávať údaje do poľa, v tomto čase je pole aktívne. Ak chcete získať jasnejšie pochopenie aktívneho stavu a toho, ako funguje s triedou „neviditeľný“, navštívte nasledujúci kód:
< telo >< div trieda = 'grid grid-cols-3 gap-4 my-4 mx-4' >
< div trieda = 'bg-blue-500 p-3 zaoblené centrum textu' >01< / div >
< div trieda = 'bg-blue-500 p-3 active:neviditeľné zaoblené textové centrum' >02< / div >
< div trieda = 'bg-blue-500 p-3 zaoblené centrum textu' >03< / div >
< / div >
< / telo >
Vo vyššie uvedenom kóde je trieda „ neviditeľný “ je priradený k „ aktívny “uveďte pre druhý” div ” na skrytie druhého prvku div, keď bude vybratý.
Po vykonaní sa ukážka webovej stránky zobrazí takto:
Vyššie uvedený výstup ukazuje, že po výbere druhého „div“ sa prvok stane neviditeľným.
Záver
Umiestenie kurzora myši a ďalšie stavy, ako je aktívny alebo zameranie, možno použiť s triedami, ktoré poskytuje obslužný program viditeľnosti, na úpravu vlastností viditeľnosti pre vybraté prvky. Ak chcete zmeniť viditeľnosť prvkov pri umiestnení myšou, trieda hover sa používa spolu s triedami viditeľnosti oddelenými farbou ako „ vznášať sa: viditeľné “ alebo „ vznášať sa: neviditeľný “. V tomto blogu je vysvetlený postup použitia stavov vznášania pomocou nástroja viditeľnosti.