Αυτό το άρθρο ασχολείται με τη διαδικασία υλοποίησης για την εφαρμογή του δείκτη και άλλων καταστάσεων με ιδιότητες ορατότητας χρησιμοποιώντας το Tailwind CSS.
Πώς να εφαρμόσετε το Hover and Other States With Visibility Utility στο Tailwind;
Το βοηθητικό πρόγραμμα ορατότητας μπορεί να χρησιμοποιηθεί κατά μήκος του δείκτη του ποντικιού και σε άλλες καταστάσεις για να πραγματοποιηθούν οι αλλαγές ορατότητας στην αλληλεπίδραση με τον χρήστη. Υπάρχουν τρεις κατηγορίες στο βοηθητικό πρόγραμμα ορατότητας και συγκεκριμένα ' ορατός », « αόρατος ', και ' κατάρρευση '. Ας ενσωματώσουμε ορισμένες κατηγορίες ορατότητας με καταστάσεις αιώρησης στα παρακάτω παραδείγματα για καλύτερη κατανόηση.
Παράδειγμα 1: Εφαρμογή κατάστασης αιώρησης κατά μήκος της «αόρατης» κλάσης
Σε αυτήν την περίπτωση, το επιλεγμένο στοιχείο πρόκειται να κρυφτεί όταν ο κέρσορας του χρήστη αιωρείται πάνω από το στοιχείο, ο κώδικας εμφανίζεται παρακάτω:
< σώμα >
< div τάξη = 'grid grid-cols-3 gap-4 my-4 mx-4' >
< div τάξη = 'bg-blue-500 p-3 στρογγυλεμένο κέντρο κειμένου' > 01 < / div >
< div τάξη = 'bg-blue-500 p-3 hover:invisible rounded text-center' > 02 < / div >
< div τάξη = 'bg-blue-500 p-3 στρογγυλεμένο κέντρο κειμένου' > 03 < / div >
< / div >
< / σώμα >
Επεξήγηση του παραπάνω κώδικα:
- Αρχικά, δημιουργείται το γονικό div το οποίο δημιουργεί μια διάταξη πλέγματος τριών στηλών που έχει ένα κενό μεταξύ κάθε στήλης και το περιθώριο ' 4px '. Χρήση του Tailwind CSS ' πλέγμα », « grid-cols-3 », « χάσμα », « μου ', και ' mx ” τάξεις αντίστοιχα.
- Στη συνέχεια, τρία παιδιά» div ” δημιουργούνται στοιχεία και εφαρμόζεται βασικό στυλ σε αυτά.
- Μετά το ' φτερουγίζω ' η κατάσταση ή ο επιλογέας στο CSS εκχωρείται στο δεύτερο 'div' και στο ' αόρατος Το ' αντιστοιχίζεται σε αυτό χωρισμένο με την άνω και κάτω τελεία ' : ' σημάδι. Αυτό κάνει το δεύτερο div αόρατο όταν το ποντίκι αιωρείται πάνω του.
Προεπισκόπηση της ιστοσελίδας μετά τη φάση εκτέλεσης:
Το παραπάνω gif δείχνει ότι το δεύτερο div γίνεται αόρατο με το ποντίκι.
Παράδειγμα 2: Εφαρμογή Ενεργής Κατάστασης κατά μήκος της «αόρατης» Τάξης
Η 'ενεργή' κατάσταση εφαρμόζει στυλ όταν ο χρήστης επιλέγει ένα συγκεκριμένο στοιχείο και δεν αποχωρεί. Ακριβώς όπως τα πλαίσια κειμένου όταν ένας χρήστης αρχίζει να εισάγει δεδομένα μέσα στο πεδίο, αυτή τη στιγμή το πεδίο είναι ενεργό. Για να κατανοήσετε καλύτερα την ενεργή κατάσταση και πώς λειτουργεί με την κλάση 'αόρατος', επισκεφτείτε τον παρακάτω κώδικα:
< σώμα >< div τάξη = 'grid grid-cols-3 gap-4 my-4 mx-4' >
< div τάξη = 'bg-blue-500 p-3 στρογγυλεμένο κέντρο κειμένου' >01< / div >
< div τάξη = 'bg-blue-500 p-3 active:invisible rounded text-center' >02< / div >
< div τάξη = 'bg-blue-500 p-3 στρογγυλεμένο κέντρο κειμένου' >03< / div >
< / div >
< / σώμα >
Στον παραπάνω κώδικα, η κλάση « αόρατος ' ανατίθεται στο ' ενεργός “Κατάσταση για το δεύτερο” div ' στοιχείο για να γίνει το δεύτερο στοιχείο div κρυφό όταν επιλεγεί.
Μετά την εκτέλεση, η προεπισκόπηση της ιστοσελίδας εμφανίζεται ως εξής:
Η παραπάνω έξοδος δείχνει ότι όταν επιλέγεται το δεύτερο 'div' το στοιχείο γίνεται αόρατο.
συμπέρασμα
Ο δείκτης αιώρησης και άλλες καταστάσεις όπως ενεργή ή εστίαση μπορούν να χρησιμοποιηθούν με τις κλάσεις που παρέχονται από το βοηθητικό πρόγραμμα ορατότητας για την τροποποίηση των ιδιοτήτων ορατότητας για τα επιλεγμένα στοιχεία. Για να αλλάξετε την ορατότητα των στοιχείων στο ποντίκι, η κλάση hover χρησιμοποιείται κατά μήκος των κατηγοριών ορατότητας που χωρίζονται με το χρώμα όπως ' hover:visible ' ή ' hover:αόρατος '. Αυτό το ιστολόγιο έχει εξηγήσει τη διαδικασία εφαρμογής καταστάσεων αιώρησης με το βοηθητικό πρόγραμμα ορατότητας.