W tym artykule przedstawiono przykład metody zastosowania efektu najechania kursorem do narzędzia automatycznego przepływu siatki w CSS Tailwind.
Jak zastosować najechanie kursorem na automatyczny przepływ siatki w Tailwind?
Aby zastosować efekt najechania na automatyczny przepływ siatki w Tailwind, utwórz plik HTML i użyj „ unosić się ”klasa z” grid-flow-
Przyjrzyj się podanym krokom jego praktycznej realizacji:
Krok 1: Użyj właściwości Hover z siatką wierszy w programie HTML
Utwórz program HTML i użyj „ unosić się ” nieruchomość o pożądanym „ grid-flow-
< ciało >
< dz klasa = „grid-flow-col-hover:grid-flow-row-przerwa-3 m-3 text-center” >
< dz klasa = 'bg-turkusowy-500 p-5' > 1 < / dz >
< dz klasa = 'bg-turkusowy-500 p-5' > 2 < / dz >
< dz klasa = 'bg-turkusowy-500 p-5' > 3 < / dz >
< dz klasa = 'bg-turkusowy-500 p-5' > 4 < / dz >
< dz klasa = 'bg-turkusowy-500 p-5' > 5 < / dz >
< dz klasa = 'bg-turkusowy-500 p-5' > 6 < / dz >
< / dz >
< / ciało >
Tutaj:
- “ siatka ” ustawia element jako kontener siatki.
- “ siatka-przepływ-kol ” definiuje przepływ elementów siatki w kolumnach.
- “ hover: grid-flow-wiersz ” zmienia przepływ elementów siatki na wiersze po najechaniu myszką na kontener.
- “ przerwa-3 ” dodaje odstęp 3 jednostek między elementami siatki.
- “ m-3 ” dodaje margines 3 jednostek wokół kontenera siatki.
- “ centrum tekstu ” wyrównuje zawartość tekstu wewnątrz elementów siatki do środka.
Krok 2: Sprawdź dane wyjściowe
Aby sprawdzić, czy efekt najechania kursorem został zastosowany do automatycznego przepływu siatki, wyświetl stronę internetową i przesuń kursor myszy nad elementami siatki:
Można zauważyć, że początkowo przepływ elementów siatki odbywa się w kolumnach, a po najechaniu na nie myszką przepływ zmienia się na wiersze. Oznacza to, że efekt zawisu został pomyślnie zastosowany do automatycznego przepływu siatki.
Wniosek
Aby zastosować efekt najechania na automatyczny przepływ siatki w Tailwind, użyj opcji „ unosić się ” klasa z pożądanym „ grid-flow-