Αυτό το άρθρο θα παρουσιάσει τη μέθοδο εφαρμογής του φαινομένου αιώρησης στο πλέγμα στηλών στο Tailwind CSS.
Πώς να εφαρμόσετε το Hover στο Column Grid στο Tailwind;
Για να εφαρμόσετε το εφέ hover στο πλέγμα στηλών στο Tailwind, δημιουργήστε ένα αρχείο HTML και χρησιμοποιήστε το ' φτερουγίζω 'τάξη με το ' grid-cols-<τιμή> ” βοηθητικό πρόγραμμα στο πρόγραμμα HTML. Θα αλλάξει τον αριθμό των στηλών όταν το ποντίκι τοποθετηθεί πάνω από το πλέγμα στηλών. Στη συνέχεια, προβάλετε τη σελίδα HTML web και τοποθετήστε το δείκτη του ποντικιού σε στοιχεία πλέγματος για να επαληθεύσετε τις αλλαγές.
Ακολουθήστε τα βήματα που παρέχονται για πρακτική εφαρμογή:
Βήμα 1: Χρησιμοποιήστε την ιδιότητα Hover with the Column Grid in HTML Program
Δημιουργήστε ένα πρόγραμμα HTML και χρησιμοποιήστε το ' φτερουγίζω « ακίνητο με το « grid-cols-<τιμή> ” χρησιμότητα. Για παράδειγμα, χρησιμοποιήσαμε το « hover:grid-cols-5 ιδιότητα για να αλλάξετε τον αριθμό των στηλών στο δείκτη του ποντικιού:
< σώμα >
< div τάξη = 'grid grid-cols-3 hover:grid-cols-5 gap-3 m-3 text-center' >
< div τάξη = 'bg-teal-500 p-5' > 1 < / div >
< div τάξη = 'bg-teal-500 p-5' > 2 < / div >
< div τάξη = 'bg-teal-500 p-5' > 3 < / div >
< div τάξη = 'bg-teal-500 p-5' > 4 < / div >
< div τάξη = 'bg-teal-500 p-5' > 5 < / div >
< div τάξη = 'bg-teal-500 p-5' > 6 < / div >
< div τάξη = 'bg-teal-500 p-5' > 7 < / div >
< div τάξη = 'bg-teal-500 p-5' > 8 < / div >
< div τάξη = 'bg-teal-500 p-5' > 9 < / div >
< div τάξη = 'bg-teal-500 p-5' > 10 < / div >
< / div >
< / σώμα >
Εδώ, στο γονικό στοιχείο
- ' πλέγμα Η κλάση χρησιμοποιείται για τη δημιουργία διάταξης πλέγματος.
- ' grid-cols-3 Η κλάση ” προσδιορίζει ότι το πλέγμα πρέπει να έχει 3 στήλες ίδιου μεγέθους.
- ' hover:grid-cols-5 Η κλάση ” καθορίζει ότι το πλέγμα πρέπει να μετατραπεί σε 5 στήλες ίσου μεγέθους όταν ένα ποντίκι αιωρείται πάνω του.
- ' κενό-3 Η κλάση ορίζει μια απόσταση 3 μονάδων μεταξύ κάθε στοιχείου πλέγματος.
- ' m-3 Η κλάση εφαρμόζει ένα περιθώριο 3 μονάδων γύρω από το δοχείο πλέγματος.
- ' κείμενο-κέντρο Η κλάση θέτει το κείμενο κάθε στοιχείου πλέγματος στο κέντρο.
Στα στοιχεία του παιδιού
- ' ” αντιπροσωπεύει τον αριθμό των στοιχείων πλέγματος.
- ' bg-teal-500 Η τάξη ρυθμίζει το γαλαζοπράσινο χρώμα στο φόντο των στοιχείων πλέγματος.
- ' σ-5 Η κλάση προσθέτει ένα padding 5 μονάδων στο περιεχόμενο μέσα στα θυγατρικά στοιχεία
.Βήμα 2: Επαλήθευση εξόδου
Για να διασφαλίσετε ότι το εφέ αιώρησης έχει εφαρμοστεί στο πλέγμα στηλών, προβάλετε την ιστοσελίδα και μετακινήστε το ποντίκι πάνω από τα στοιχεία πλέγματος:
Μπορεί να φανεί ότι όταν το ποντίκι τοποθετείται πάνω από το στοιχείο πλέγματος, ο αριθμός των στηλών αλλάζει. Υποδεικνύει ότι το εφέ αιώρησης εφαρμόστηκε με επιτυχία στο πλέγμα στηλών.
συμπέρασμα
Για να εφαρμόσετε το εφέ αιώρησης στο πλέγμα στηλών στο Tailwind, χρησιμοποιήστε το ' φτερουγίζω 'τάξη με το ' grid-cols-<τιμή> ” βοηθητικό πρόγραμμα στο πρόγραμμα HTML. Αλλάζει τον αριθμό των στηλών στο δείκτη του ποντικιού. Για να διασφαλίσετε τις αλλαγές, προβάλετε τη σελίδα HTML web και τοποθετήστε το δείκτη του ποντικιού σε στοιχεία πλέγματος. Αυτό το άρθρο έχει δείξει τη μέθοδο εφαρμογής του φαινομένου αιώρησης στο πλέγμα στηλών στο Tailwind CSS.