W tym artykule zademonstrujemy metodę zastosowania efektu najechania kursorem na siatkę kolumn w CSS Tailwind.
Jak zastosować najechanie kursorem na siatkę kolumn w Tailwind?
Aby zastosować efekt najechania na siatkę kolumn w Tailwind, utwórz plik HTML i użyj „ unosić się ”klasa z” grid-cols-
Postępuj zgodnie z podanymi krokami w celu praktycznego wdrożenia:
Krok 1: Użyj właściwości Hover z siatką kolumn w programie HTML
Utwórz program HTML i użyj „ unosić się ” obiekt z „ grid-cols-
< ciało >
< dz klasa = 'grid grid-cols-3 hover:grid-cols-5 gap-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 klasa = 'bg-turkusowy-500 p-5' > 7 < / dz >
< dz klasa = 'bg-turkusowy-500 p-5' > 8 < / dz >
< dz klasa = 'bg-turkusowy-500 p-5' > 9 < / dz >
< dz klasa = 'bg-turkusowy-500 p-5' > 10 < / dz >
< / dz >
< / ciało >
Tutaj, w elemencie nadrzędnym
- “ siatka ” służy do tworzenia układu siatki.
- “ siatka-kols-3 ” określa, że siatka powinna mieć 3 równej wielkości kolumny.
- “ najechanie kursorem: siatka-kolumny-5 ” określa, że siatka powinna zostać zmieniona na 5 równych kolumn po najechaniu na nią myszką.
- “ przerwa-3 ” class ustawia odstęp 3 jednostek między każdym elementem siatki.
- “ m-3 ” stosuje margines 3 jednostek wokół kontenera siatki.
- “ centrum tekstu ” ustawia tekst każdego elementu siatki na środku.
W elementach potomnych
- “
” reprezentuje liczbę elementów siatki. - “ bg-turkusowy-500 ” ustawia turkusowy kolor tła elementów siatki.
- “ p-5 ” dodaje dopełnienie 5 jednostek do treści wewnątrz elementów potomnych .
Krok 2: Sprawdź dane wyjściowe
Aby upewnić się, że efekt najechania kursorem został zastosowany na siatce słupów, wyświetl stronę internetową i przesuń kursor myszy nad elementy siatki:
Można zauważyć, że po najechaniu myszką na element siatki zmienia się liczba kolumn. Oznacza to, że efekt najechania kursorem został pomyślnie zastosowany na siatce słupów.
Wniosek
Aby zastosować efekt zawisu na siatce słupów w Tailwind, użyj opcji „ unosić się ”klasa z” grid-cols-
” w programie HTML. Zmienia liczbę kolumn po najechaniu myszką. Aby wprowadzić zmiany, wyświetl stronę HTML sieci Web i najedź kursorem myszy na elementy siatki. W tym artykule zademonstrowano metodę zastosowania efektu aktywowania na siatce kolumn w CSS Tailwind.