Αυτό το άρθρο θα παρουσιάσει τη μέθοδο εφαρμογής του φαινομένου αιώρησης στο πλέγμα σειρών στο Tailwind CSS.
Πώς να εφαρμόσετε το Hover στο πλέγμα γραμμών στο Tailwind;
Για να εφαρμόσετε το εφέ hover στο πλέγμα σειρών στο Tailwind, δημιουργήστε ένα αρχείο HTML και χρησιμοποιήστε το ' φτερουγίζω 'τάξη με το ' πλέγμα-γραμμές-<τιμή> ” βοηθητικό πρόγραμμα στο πρόγραμμα HTML. Αλλάζει τον αριθμό των σειρών όταν το ποντίκι τοποθετείται πάνω από το πλέγμα σειρών. Μετά από αυτό, προβάλετε τη σελίδα HTML web και τοποθετήστε το δείκτη του ποντικιού σε στοιχεία πλέγματος για να διασφαλίσετε τις αλλαγές.
Δείτε τα βήματα που παρέχονται για πρακτική εφαρμογή:
Βήμα 1: Χρησιμοποιήστε την ιδιότητα Hover με το πλέγμα γραμμών στο πρόγραμμα HTML
Δημιουργήστε ένα πρόγραμμα HTML και χρησιμοποιήστε το ' φτερουγίζω « ακίνητο με το « πλέγμα-γραμμές-<τιμή> ” χρησιμότητα. Για παράδειγμα, χρησιμοποιήσαμε το « hover:grid-rows-5 ” κλάση για να αλλάξετε τον αριθμό των σειρών στο δείκτη του ποντικιού:
< σώμα >
< div τάξη = 'grid grid-rows-3 hover:grid-rows-5 grid-flow-col 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 >
< / σώμα >
Εδώ, στο γονικό στοιχείο
- ' πλέγμα Η κλάση χρησιμοποιείται για τη δημιουργία διάταξης πλέγματος.
- ' πλέγμα-γραμμές-3 Η κλάση ” προσδιορίζει ότι το πλέγμα πρέπει να έχει 3 σειρές ίσου μεγέθους.
- ' hover:grid-rows-5 Η κλάση αλλάζει το πλέγμα σε 5 σειρές ίσου μεγέθους όταν ένα ποντίκι αιωρείται πάνω του.
- ' πλέγμα-ροή-κολ Η τάξη ” τοποθετεί τα στοιχεία του πλέγματος οριζόντια σε στήλες.
- ' κενό-3 Η κλάση ορίζει μια απόσταση 3 μονάδων μεταξύ κάθε στοιχείου πλέγματος.
- ' m-3 Η κλάση εφαρμόζει ένα περιθώριο 3 μονάδων γύρω από το δοχείο πλέγματος.
- ' κείμενο-κέντρο Η κλάση θέτει το κείμενο κάθε στοιχείου πλέγματος στο κέντρο.
Στα στοιχεία του παιδιού
- ' ” αντιπροσωπεύει τον αριθμό των στοιχείων πλέγματος.
- ' bg-teal-500 Η τάξη ρυθμίζει το γαλαζοπράσινο χρώμα στο φόντο των στοιχείων πλέγματος.
- ' σ-5 Η τάξη ” προσθέτει ένα συμπλήρωμα 5 μονάδων στο περιεχόμενο μέσα στα θυγατρικά στοιχεία
.Βήμα 2: Επαλήθευση εξόδου
Για να επαληθεύσετε ότι το εφέ αιώρησης έχει εφαρμοστεί στο πλέγμα σειρών, προβάλετε την ιστοσελίδα και μετακινήστε το ποντίκι πάνω από τα στοιχεία πλέγματος:
Μπορεί να παρατηρηθεί ότι αρχικά υπάρχουν 3 σειρές και όταν το ποντίκι αιωρείται πάνω της, ο αριθμός των σειρών έχει αλλάξει σε 5. Αυτό δείχνει ότι το εφέ αιώρησης εφαρμόστηκε με επιτυχία στο πλέγμα σειρών.
συμπέρασμα
Για να εφαρμόσετε το εφέ αιώρησης στο πλέγμα σειρών στο Tailwind, χρησιμοποιήστε το ' φτερουγίζω 'τάξη με το ' πλέγμα-γραμμές-<τιμή> ” βοηθητικό πρόγραμμα στο πρόγραμμα HTML. Αλλάζει τον αριθμό των σειρών κατά την τοποθέτηση του δείκτη. Για να διασφαλίσετε τις αλλαγές, προβάλετε τη σελίδα HTML web και τοποθετήστε το δείκτη του ποντικιού σε στοιχεία πλέγματος. Αυτό το άρθρο επεξηγεί τη μέθοδο εφαρμογής του εφέ αιώρησης στο πλέγμα σειρών στο Tailwind CSS.