Πώς να εφαρμόσετε το Hover στο CSS με παραδείγματα



Αυτό το άρθρο θα σας δώσει μια λεπτομερή και περιεκτική γνώση του τρόπου εφαρμογής του Hover στο CSS με παραδείγματα.

Τα Cascading Style Sheets (CSS) έχουν σχεδιαστεί χρησιμοποιώντας το ή μορφή XML (συμπεριλαμβανομένου του XHTML, SVG). Είναι μια γλώσσα φύλλων στυλ που χρησιμοποιείται κυρίως για την περιγραφή στοιχείων μέσω μιας διαφορετικής σειράς μεθόδων μορφοποίησης. Μία από τις μεθόδους αιωρείται και σε αυτό το άρθρο, θα κατανοήσουμε το Hover σε CSS με τον ακόλουθο τρόπο:

Τι είναι το Hover στο CSS;

Το CSS hover είναι ένα στοιχείο επιλογής που χρησιμοποιείται για το στυλ διαφορετικών στοιχείων όταν ο δείκτης του ποντικιού αιωρείται πάνω τους. Μπορούν να χρησιμοποιηθούν σε σχεδόν κάθε στοιχείο HTML. Το χαρακτηριστικό hover στο CSS έχει σημαντική σημασία στο σχεδιασμό ιστοσελίδων.





μέθοδος python __init__

Αιωρηθείτε στο CSS

Το στοιχείο hover μπορεί να επισημάνει, να κωδικοποιήσει και να προσαρμόσει ιστοσελίδες σύμφωνα με τις προτιμήσεις των χρηστών σε ένα συμπαγές και πραγματικό πρόγραμμα σχεδιασμού ιστοσελίδων.



Πού χρησιμοποιείται το Hover;

Τα πιο συνηθισμένα παραδείγματα της βιωσιμότητας του χαρακτηριστικού hover μπορούν να επισημανθούν σε μεγάλους ιστότοπους αγορών όπως το Flipkart και το Amazon. Όταν οι χρήστες αιωρούνται σε οποιοδήποτε προϊόν σε αυτούς τους ιστότοπους ηλεκτρονικού εμπορίου, το προϊόν είναι προγραμματισμένο να εκτελεί μια αυτοματοποιημένη λειτουργία αιωρούμενου ζουμ για να παρέχει στον πελάτη καλύτερη εικόνα των επιλεγμένων προϊόντων του. Μέσω αυτού του προγραμματισμού, η ιστοσελίδα έχει σχεδιαστεί για να εμφανίζει μια συμπαγή προβολή ολόκληρης της γκάμας προϊόντων συνοδευόμενη από μια λεπτομερή προβολή του προϊόντος που ενδιαφέρει σε έναν σχεδιασμό ιστοσελίδας.

Τι κάνει το Hover;

Το hover είναι ένα πολυλειτουργικό εργαλείο προγραμματισμού μέσω του οποίου ο χρήστης μπορεί να προσαρμόσει το στοιχείο προορισμού με έναν ατελείωτο αριθμό κριτηρίων μορφοποίησης. Ορισμένες περιπτώσεις της λειτουργικής τεχνογνωσίας του χαρακτηριστικού hover περιλαμβάνουν:

  • Αλλαγή χρώματος φόντου / γραμματοσειράς
  • Ενσωμάτωση κρυμμένου κειμένου που εμφανίζεται στο Hover
  • Δημιουργήστε Rollover Effects στις εικόνες
  • Αυτοματοποιημένο ζουμ σε κείμενο / εικόνες
  • Τροποποίηση αδιαφάνειας εικόνας
  • Ενσωμάτωση κειμένου
  • Ανταλλαγή εικόνας
  • Διχ. Φτερουγίζω
  • Πολλαπλές άλλες λειτουργίες μορφοποίησης Hover CSS.

Το εφέ αιωρήματος τροποποιεί βασικά την τιμή της ιδιότητας ενός στοιχείου για να επιτρέψει τις κινούμενες αλλαγές σε ένα δηλωμένο κείμενο / εικόνα ή αντίστοιχα στοιχεία. Η ενσωμάτωση στοιχείων CSS hover σε σχεδιασμό ιστοσελίδας μετατρέπει μια κανονική ιστοσελίδα σε διαδραστική, στιβαρή και εξαιρετικά λειτουργική ιστοσελίδα. Αυτά τα σχέδια ιστοσελίδων είναι φιλικά προς το χρήστη και περιεκτικά. Οι ιστοσελίδες που έχουν σχεδιαστεί από το Hover περιέχουν υψηλότερη έκκληση για τους καταναλωτές και δελεάζουν τους πιθανούς πελάτες.



Συμβατότητα του Hover στο CSS

Το χαρακτηριστικό hover είναι συμβατό με όλα τα μεγάλα προγράμματα περιήγησης στο Web. Ωστόσο, η εφαρμογή αυτού του στοιχείου σε συσκευές αφής εξακολουθεί να είναι μια δύσκολη εργασία. Το hover στο CSS επιτρέπει την προσβασιμότητα περιεχομένου σε συσκευές που δεν υποστηρίζουν λειτουργίες hover. Έχει παρατηρηθεί ότι μια ενεργοποιημένη λειτουργία αιωρηματοδότησης στη μη υποστηρικτική συσκευή μπορεί να κολλήσει στη συσκευή.

Κατά συνέπεια, η ζωτική εμφάνιση κρίσιμου περιεχομένου αποκλείεται μέσω του ζητήματος μορφοποίησης. Από τη μία πλευρά, όπου το στοιχείο hover στο πρόγραμμα CSS συμβάλλει σε μεγάλο βαθμό αποτελεσματικής εξατομίκευσης στις ιστοσελίδες αντίστροφα, η λειτουργικότητά του σε κινητές συσκευές είναι εξαιρετικά αδρανής. Ανταποκρινόμαστε στις συνθήκες όπου ο κόσμος της πληροφορικής αναπτύσσεται ουσιαστικά κινητός, το χαρακτηριστικό hover κινδυνεύει να ξεπεραστεί με τις τεχνολογικές εξελίξεις. Επομένως, η ανάγκη δημιουργίας ενός φορητού ενσωματωμένου χαρακτηριστικού που λειτουργεί με συσκευές αφής και κινητές συσκευές είναι εξαιρετικά κρίσιμη.

Πώς λειτουργεί το Hover στο CSS;

Το ενεργό στυλ ψευδο-κατηγορίας είναι κυρίαρχο στη μορφοποίηση CSS hover και παρακάμπτει οποιονδήποτε / κάθε επόμενο σύνδεσμο που ακολουθείται από αυτήν την ψευδο-τάξη. Για παράδειγμα, στο pseudo-class “: link: visit, or: active ο κανόνας: hover πρέπει να τοποθετηθεί μετά: link και: visit αλλά πριν: ενεργός για κατάλληλο: hover styling. Η σειρά LVHA:: link,: hover,: επισκέφθηκε και: ενεργή χρησιμοποιείται ως αναφορά για το σωστό: στυλ μορφοποίησης hover.

div {background-color: green padding: 18px display: none} span: hover + div {display: block}Hover Test!Εμφανίζεται κρυμμένος κώδικας στο hover

Στον παραπάνω κώδικα, το στοιχείο span τροποποιείται για να συγχωνεύσει το στοιχείο hover και div χρησιμοποιώντας το στοιχείο span: hover + div. Το στοιχείο span που θα εμφανιστεί στην κύρια σελίδα προορισμού θα εμφανίσει το κείμενο 'Hover test!' Περαιτέρω αιωρείται στο στοιχείο span αποκαλύπτει το στοιχείο div 'Κρυμμένος κώδικας δείχνει στο hover'. Αυτή η μορφή ενσωμάτωσης είναι λειτουργική τόσο στο κείμενο όσο και στις εικόνες.

συμβολοσειρά ημερομηνίας java έως σήμερα

Αιωρήστε το χρώμα του φόντου Αλλαγή σε 'Κόκκινο'

p: hover, h1: hover, a: hover {φόντο-χρώμα: Κόκκινο}

Hover Red

Hover Red

Συνδέσεις:

Hover Test Red:

Google com

Σημείωση: Χαίρετε

πώς να χρησιμοποιήσετε αρχεία σε Java

Ο παραπάνω κώδικας προσαρμόζει το

,

και στοιχείο και τα ενσωματώνει σε μια κοινή συνάρτηση hover. Αυτός ο κωδικός έχει σχεδιαστεί για να αλλάζει το χρώμα του κειμένου σε κόκκινο όταν ο δείκτης του ποντικιού αιωρείται πάνω τους. Το στοιχείο h1 και h2 εμφανίζει 'CSS: Hover Test Code' και 'Hover Red' αντίστοιχα. Το στοιχείο παραγράφου: Hover Test Red και ετικέτα αγκύρωσης: google.com επισημαίνεται με κόκκινο χρώμα όταν ο δείκτης του ποντικιού αιωρείται πάνω τους.

Δημιουργία αιωρήματος αιωρήματος στις εικόνες

.pic {πλάτος: 1900px ύψος: 1900px αδιαφάνεια: 1 φίλτρο: άλφα (αδιαφάνεια = 100) φόντο: url (https://cdn.pixabay.com/photo/2013/07/13/11/29/orange-158258_1280. png) no-repeat} .pic: hover {αδιαφάνεια: 0,2 φίλτρο: άλφα (αδιαφάνεια = 30)}

Το παραπάνω πρόγραμμα CSS εμφανίζει την τροποποίηση της αδιαφάνειας μιας εικόνας κατά την αιωρηματοποίηση. Η αρχική αδιαφάνεια της εικόνας είναι ένας Ωστόσο, χρησιμοποιώντας το φίλτρο αδιαφάνειας το ίδιο έχει τροποποιηθεί σε 0,2. Αυτός ο κώδικας εμφανίζει ότι χρησιμοποιώντας το στοιχείο αιωρήματος μπορεί κάποιος να τροποποιήσει την αδιαφάνεια μιας εικόνας ή / και κειμένου.

Δημιουργία επικάλυψης κειμένου σε εικόνες

.pic {width: 4000px ύψος: 2170px background: url (http://eatlogos.com/food_and_drinks/png/vector_orange_logo.png) no-repeat} .text {πλάτος: 3400px ύψος: 2170px φόντο: #FFF αδιαφάνεια: 0} .pic: hover .text {opacity: 0.6 text-align: justify color: # 000000 font-size: 20px font-weight: 700 font-family: 'Times New Roman', Times, serif padding: 30px} Το πορτοκαλί είναι μια ίνα πλούσια φρούτα. Τα αντιοξειδωτικά που υπάρχουν σε ένα πορτοκάλι μπορούν να βοηθήσουν στην πέψη, να κάνουν το δέρμα λάμψη και να λειτουργήσει ως αντιγηραντικό στοιχείο.

Το Text Layering στο CSS hover είναι ένα αποτελεσματικό εργαλείο για την ενσωμάτωση του περιγραφικού κειμένου της εικόνας μέσα στην ίδια την εικόνα. Αυτό το εργαλείο βοηθά στην παροχή μιας συμπαγούς επισκόπησης της εικόνας χωρίς να καταλαμβάνει αδρανή χώρο σε περιορισμένο χώρο σχεδιασμού ιστοσελίδων. Σε αυτόν τον κώδικα, η εικόνα φόντου είναι ενσωματωμένη με ένα περιγραφικό κείμενο που εμφανίζεται όταν ο δείκτης του ποντικιού αιωρείται πάνω από το κείμενο.



Αυτό καταλήγει σε όλες τις σημαντικές πτυχές του hover στο CSS και τονίζει τη χρησιμότητά του στην ανάπτυξη ιστού. Υπάρχουν πολλά ειδικά εφέ που μπορεί να φέρει στις ιστοσελίδες μας. Μπορούμε πάντα να δοκιμάζουμε διαφορετικούς συνδυασμούς του επιλογέα hover με άλλες ιδιότητες CSS όπως κινούμενα σχέδια, εικόνες φόντου, υπερσυνδέσμους κ.λπ. και να διερευνήσουμε τις δυνατότητές του όπως είδαμε σε μερικά από τα παραδείγματα μας. Τέλος, το CSS είναι ένας από τους πιο ισχυρούς τρόπους σχεδιασμού και μετατροπής ιστοσελίδων και ως εκ τούτου είναι επείγον για τους προγραμματιστές ιστού να αποκτήσουν αυτήν την ικανότητα προκειμένου να δημιουργήσουν δυναμικές ιστοσελίδες.

Ρίξτε μια ματιά στο δικό μας που έρχεται με ζωντανή εκπαίδευση με καθοδήγηση εκπαιδευτή και πραγματική εμπειρία έργου. Αυτή η εκπαίδευση σας κάνει ικανό σε δεξιότητες για να εργαστείτε με τεχνολογίες ιστού back-end και front-end. Περιλαμβάνει εκπαίδευση σε Web Development, jQuery, Angular, NodeJS, ExpressJS και MongoDB.

Έχετε μια ερώτηση για εμάς; Παρακαλώ αναφέρετέ το στην ενότητα σχολίων του blog 'Hover in CSS' και θα επικοινωνήσουμε μαζί σας.