Ten artykuł dotyczy procedury implementacji w celu zastosowania najechania kursorem i innych stanów z właściwościami widoczności przy użyciu CSS Tailwind.
Jak zastosować Hover i inne stany za pomocą narzędzia Visibility w Tailwind?
Narzędzie widoczności może być używane wraz z najechaniem kursorem i innymi stanami, aby wprowadzać zmiany widoczności podczas interakcji użytkownika. W narzędziu widoczności dostępne są trzy klasy, a mianowicie „ widoczny ”, „ niewidzialny ', I ' zawalić się ”. Zintegrujmy niektóre klasy widoczności ze stanami najechania kursorem w poniższych przykładach, aby lepiej zrozumieć.
Przykład 1: Zastosowanie stanu najechania wzdłuż „niewidzialnej” klasy
W tym przypadku wybrany element zostanie ukryty, gdy kursor użytkownika najedzie na element, kod pokazano poniżej:
< ciało >
< dz klasa = „siatka grid-cols-3 gap-4 my-4 mx-4” >
< dz klasa = „bg-blue-500 p-3 zaokrąglony środek tekstu” > 01 < / dz >
< dz klasa = „bg-blue-500 p-3 hover: niewidoczny zaokrąglony środek tekstu” > 02 < / dz >
< dz klasa = „bg-blue-500 p-3 zaokrąglony środek tekstu” > 03 < / dz >
< / dz >
< / ciało >
Wyjaśnienie powyższego kodu:
- Najpierw tworzony jest nadrzędny div, który tworzy trójkolumnowy układ siatki ze spacją między każdą kolumną a marginesem „ 4px ”. Używanie kodu CSS Tailwind „ siatka ”, „ siatka-kols-3 ”, „ luka ”, „ Mój ', I ' mx ” klasy odpowiednio.
- Następnie troje dzieci” dz Tworzone są elementy i stosowana jest do nich podstawowa stylizacja.
- A później ' unosić się ” stan lub selektor w CSS jest przypisany do drugiego „div”, a „ niewidzialny ” jest do niego przypisany oddzielony dwukropkiem „ : ' podpisać. To sprawia, że drugi element div jest niewidoczny po najechaniu na niego myszką.
Podgląd strony po fazie wykonania:
Powyższy gif pokazuje, że drugi div staje się niewidoczny po najechaniu myszką.
Przykład 2: Zastosowanie stanu aktywnego wzdłuż „niewidzialnej” klasy
Stan „aktywny” stosuje style, gdy użytkownik wybierze określony element i nie wyjdzie. Podobnie jak pola tekstowe, gdy użytkownik zaczyna wprowadzać dane w polu, w tym momencie pole jest aktywne. Aby lepiej zrozumieć stan aktywny i jego działanie z klasą „niewidzialną”, zapoznaj się z poniższym kodem:
< ciało >< dz klasa = „siatka grid-cols-3 gap-4 my-4 mx-4” >
< dz klasa = „bg-blue-500 p-3 zaokrąglony środek tekstu” >01< / dz >
< dz klasa = „bg-blue-500 p-3 aktywny: niewidoczny zaokrąglony środek tekstu” >02< / dz >
< dz klasa = „bg-blue-500 p-3 zaokrąglony środek tekstu” >03< / dz >
< / dz >
< / ciało >
W powyższym kodzie klasa „ niewidzialny ” jest przypisany do „ aktywny ”stan na drugie” dz ”, aby ukryć drugi element div, gdy zostanie wybrany.
Po wykonaniu podgląd strony internetowej wygląda następująco:
Powyższe dane wyjściowe pokazują, że po wybraniu drugiego „div” element staje się niewidoczny.
Wniosek
Najechanie kursorem i inne stany, takie jak aktywny lub fokus, mogą być używane z klasami udostępnianymi przez narzędzie widoczności do modyfikowania właściwości widoczności dla wybranych elementów. Aby zmienić widoczność elementów po najechaniu myszką, klasa hover jest używana wraz z klasami widoczności oddzielonymi kolorem, na przykład „ najechanie: widoczne ' Lub ' zawis: niewidoczny ”. W tym blogu wyjaśniono procedurę stosowania stanów najechania kursorem za pomocą narzędzia widoczności.