Αυτό το άρθρο θα παρουσιάσει τη διαδικασία εφαρμογής του hover με διακόσμηση κουτιού στο Tailwind.
Πώς να εφαρμόσετε το Hover on Box Decoration Break στο Tailwind;
Η ιδιότητα CSS 'box-decoration-break' καθορίζει την απόδοση του φόντου, του περιγράμματος και της επένδυσης για ένα στοιχείο όταν εκτείνεται σε πολλές γραμμές ή στήλες. Για να εφαρμόσετε το εφέ αιώρησης σε στοιχεία σπασίματος διακόσμησης κουτιού, απαιτείται να χρησιμοποιήσετε το ' φτερουγίζω ιδιότητα και εφαρμόστε οποιοδήποτε εφέ σε στοιχεία.
Δείτε τα παρακάτω βήματα για μια πρακτική επίδειξη:
Βήμα 1: Χρησιμοποιήστε την ιδιότητα Hover στο πρόγραμμα Box Decoration Break στο πρόγραμμα HTML
Δημιουργήστε ένα πρόγραμμα HTML και χρησιμοποιήστε οποιαδήποτε ιδιότητα hover στα στοιχεία διακοπής διακόσμησης κουτιού. Για παράδειγμα, έχουμε εφαρμόσει ένα « hover:box-decoration-clone ' ιδιότητα στο στοιχείο 'box διακόσμηση-φέτα' και ένα ' hover:text-yellow-500 ' ιδιότητα στο στοιχείο 'box-decoration-clone':
< σώμα >
< σπιθαμή τάξη = 'box-decoration-slice hover:box-decoration-clone bg-teal-600 text-white text-3xl px-2' >
Linux < br / >
Ιχνος
< / σπιθαμή >
< br >
< br >
< σπιθαμή τάξη = 'box-decoration-clone hover:text-yellow-500 bg-teal-600 text-white text-3xl px-2' >
Linux < br / >
Ιχνος
< / σπιθαμή >
< / σώμα >
Εδώ:
- Ο ' hover:box-decoration-clone ' εφαρμόζει ένα εφέ 'box-decoration-clone' όταν το στοιχείο 'box-decoration-slice' τοποθετείται πάνω.
- Ο ' hover:text-yellow-500 ' αλλάζει το χρώμα του κειμένου σε κίτρινο όταν το στοιχείο 'box-decoration-clone' τοποθετείται επάνω.
Βήμα 2: Επαλήθευση εξόδου
Εκτελέστε το πρόγραμμα HTML για να επαληθεύσετε την έξοδο:
Η παραπάνω έξοδος δείχνει ότι το εφέ αιώρησης έχει εφαρμοστεί στα στοιχεία σύμφωνα με τα οποία προσδιορίστηκε.
συμπέρασμα
Το Tailwind CSS προσφέρει μια συλλογή από κατηγορίες βοηθητικών προγραμμάτων για την εφαρμογή εφέ αιώρησης σε οποιοδήποτε στοιχείο. Για να εφαρμόσετε αιώρηση σε στοιχεία διακοπής διακόσμησης κουτιού, χρησιμοποιήστε το ' φτερουγίζω ” και καθορίστε το εφέ στο πρόγραμμα HTML. Οι χρήστες μπορούν να αλλάξουν το χρώμα φόντου, το χρώμα του κειμένου και το χρώμα του περιγράμματος ή να προσθέσουν μια σκιά σε ένα στοιχείο κατά την τοποθέτηση του δείκτη. Αυτό το άρθρο έχει εξηγήσει τη διαδικασία εφαρμογής του hover με διακόσμηση κουτιού στο Tailwind.