Acest articol tratează procedura de implementare pentru a aplica hover și alte stări cu proprietăți de vizibilitate folosind Tailwind CSS.
Cum se aplică Hover și alte state cu utilitarul de vizibilitate în Tailwind?
Utilitarul de vizibilitate poate fi utilizat de-a lungul hoverului și în alte stări pentru a face modificări de vizibilitate în interacțiunea utilizatorului. Există trei clase sub utilitarul de vizibilitate și anume „ vizibil ”, “ invizibil ', și ' colaps ”. Să integrăm câteva clase de vizibilitate cu stări de hover în exemplele de mai jos pentru o mai bună înțelegere.
Exemplul 1: aplicarea stării Hover de-a lungul clasei „invizibile”.
În acest caz, elementul selectat va fi ascuns atunci când cursorul utilizatorului trece peste element, codul este afișat mai jos:
< corp >
< div clasă = „grid grid-cols-3 gap-4 my-4 mx-4” >
< div clasă = „bg-blue-500 p-3 rotunjit centru de text” > 01 < / div >
< div clasă = „bg-blue-500 p-3 hover:centru de text rotunjit invizibil” > 02 < / div >
< div clasă = „bg-blue-500 p-3 rotunjit centru de text” > 03 < / div >
< / div >
< / corp >
Explicația codului de mai sus:
- În primul rând, este creat div-ul părinte care creează un aspect al grilei cu trei coloane având un spațiu între fiecare coloană și marginea „ 4px ”. Folosind CSS Tailwind „ grilă ”, “ grid-cols-3 ”, “ decalaj ”, “ Ale mele ', și ' mx ”, respectiv clase.
- În continuare, trei copii” div ” sunt create elemente și li se aplică stilul de bază.
- Apoi, „ planare ” sau selectorul din CSS este atribuit celui de-al doilea „div” și „ invizibil „ îi este atribuit separat de două puncte „ : ' semn. Acest lucru face ca a doua div să fie invizibilă atunci când mouse-ul este plasat peste el.
Previzualizare a paginii web după faza de execuție:
Gif-ul de mai sus arată că al doilea div devine invizibil la trecerea mouse-ului.
Exemplul 2: Aplicarea stării active de-a lungul clasei „invizibile”.
Starea „activă” aplică stiluri atunci când utilizatorul selectează un anumit element și nu părăsește. La fel ca în casetele de text când un utilizator începe să introducă date în câmp, în acest moment câmpul este activ. Pentru a obține o înțelegere mai clară a stării active și a modului în care funcționează cu clasa „invizibilă”, vizitați codul de mai jos:
< corp >< div clasă = „grid grid-cols-3 gap-4 my-4 mx-4” >
< div clasă = „bg-blue-500 p-3 rotunjit centru de text” >01< / div >
< div clasă = „bg-blue-500 p-3 activ: centru text rotunjit invizibil” >02< / div >
< div clasă = „bg-blue-500 p-3 rotunjit centru de text” >03< / div >
< / div >
< / corp >
În codul de mai sus, clasa „ invizibil ” este atribuit „ activ ”stare pentru a doua” div ” element pentru ca al doilea element div să fie ascuns atunci când este selectat.
După execuție, previzualizarea paginii web apare astfel:
Ieșirea de mai sus arată că atunci când este selectat al doilea „div”, elementul devine invizibil.
Concluzie
Hover și alte stări precum activ sau focus pot fi utilizate cu clasele furnizate de utilitarul de vizibilitate pentru a modifica proprietățile de vizibilitate pentru elementele selectate. Pentru a modifica vizibilitatea elementelor la trecerea mouse-ului, clasa de hover este utilizată de-a lungul claselor de vizibilitate separate prin culoare precum „ hover:vizibil ” sau ” hover:invizibil ”. Acest blog a explicat procedura de aplicare a stărilor de hover cu utilitarul de vizibilitate.