Ο στόχος αυτού του εγχειριδίου είναι να διερευνήσει τον τρόπο αλλαγής μιας εικόνας κατά την αιώρηση χρησιμοποιώντας CSS. Λοιπόν, ας ξεκινήσουμε!
Τι είναι το :hover στο CSS;
Το :hover είναι ένα στοιχείο ψευδο-κλάσης που χρησιμοποιείται για την αλλαγή της κατάστασης των στοιχείων HTML όταν το ενεργοποιεί ένα ποντίκι. Αυτός ο επιλογέας CSS χρησιμοποιείται κυρίως για το στυλ ή την επιλογή στοιχείων. Ωστόσο, δεν μπορεί να εφαρμοστεί σε συνδέσμους.
Σύνταξη
Η σύνταξη του :hover δίνεται παρακάτω:
στοιχείο : φτερουγίζω {
Κωδικός CSS. . .
}
Εδώ, ' στοιχείο ” αναφέρεται στο στοιχείο στο οποίο θέλετε να εφαρμόσετε το εφέ αιώρησης.
Τώρα, θα περάσουμε στο πρακτικό παράδειγμα της αλλαγής της εικόνας κατά την αιώρηση χρησιμοποιώντας CSS.
Παράδειγμα: Πώς να αλλάξετε εικόνα στο Hover χρησιμοποιώντας CSS;
Για να αλλάξετε πρώτα την εικόνα στο δείκτη του ποντικιού, προσθέστε δύο εικόνες στην ενότητα HTML. Η πρώτη εικόνα είναι για την ενεργή κατάσταση και η επόμενη είναι για την κατάσταση αιώρησης.
Βήμα 1: Προσθήκη εικόνων
Για τον καθορισμένο σκοπό, θα προσθέσουμε δύο εικόνες, ' εικόνα 1 ' και ' εικόνα2 ' και αντιστοιχίστε το όνομα της τάξης στη δεύτερη εικόνα ως ' hover_img '.
HTML
< σώμα >< div τάξη = 'img' >
< img src = 'image1.png' >
< img src = 'image2.png' τάξη = 'hover_img' >
< / div >
< / σώμα >
Βήμα 2: Στυλ Εικόνες
Τώρα, μεταβείτε στο CSS για να ορίσετε τη θέση και των δύο εικόνων χρησιμοποιώντας το ' θέση ” ιδιοκτησία. Θα θέσουμε τη θέση του ως « απόλυτος ” για να το τοποθετήσετε απολύτως σε σχέση με τον πλησιέστερο γονέα του.
CSS
.img {θέση : απόλυτος ;
}
Αυτό θα δείξει το ακόλουθο αποτέλεσμα:
Στο επόμενο βήμα, θα ορίσουμε τη δεύτερη εικόνα μπροστά από την πρώτη. Για να το κάνουμε αυτό, θα ορίσουμε τη θέση της εικόνας ως ' απόλυτος ' και ορίστε την επάνω και αριστερή θέση ως ' 0 '. Η χρήση αυτής της εικόνας τοποθετείται μπροστά από την πρώτη εικόνα, αλλά θέλουμε να εμφανίσουμε τη δεύτερη εικόνα όταν ένα ποντίκι αιωρείται πάνω της. Έτσι, ορίζοντας την τιμή εμφάνισης ως ' κανένας ” θα εμφανίσει το επιθυμητό αποτέλεσμα:
.hover_img {θέση : απόλυτος ;
μπλουζα : 0 ;
αριστερά : 0 ;
απεικόνιση : κανένας ;
}
Η έξοδος του συγκεκριμένου κώδικα είναι η εξής:
Η δεύτερη εικόνα κρύβεται με επιτυχία πίσω από την πρώτη εικόνα.
Τώρα, προχωρήστε στο επόμενο βήμα.
Βήμα 3: Αλλαγή εικόνας στο Hover
Στη συνέχεια, χρησιμοποιήστε το ' :φτερουγίζω ' και επιλέξτε ' .img ” για να εφαρμόσετε το δείκτη του ποντικιού στο επιλεγμένο στοιχείο. Στη συνέχεια, ορίστε το όνομα της τάξης της δεύτερης εικόνας ' .hover_img '. Μετά από αυτό, μέσα στις παρενθέσεις, ορίστε την τιμή της ιδιότητας εμφάνισης ως ' στη γραμμή ” που θα αναγκάσει το στοιχείο να χωρέσει στην ίδια γραμμή:
.img : φτερουγίζω .hover_img {απεικόνιση : στη γραμμή ;
}
Ακολουθεί το αποτέλεσμα που δείχνει ότι η εικόνα αλλάζει όταν ο χρήστης τοποθετεί το δείκτη του ποντικιού σε αυτήν:
Η παραπάνω έξοδος υποδεικνύει ότι αλλάξαμε με επιτυχία την εικόνα κατά την τοποθέτηση του δείκτη με χρήση CSS.
συμπέρασμα
Η εικόνα μπορεί να αλλάξει κατά την αιώρηση χρησιμοποιώντας το ' :φτερουγίζω ” ψευδο-ταξικό στοιχείο. Για να το κάνετε αυτό, προσθέστε τις απαιτούμενες εικόνες στο αρχείο HTML, τοποθετήστε τις στην ίδια θέση χρησιμοποιώντας CSS και εφαρμόστε τον επιλογέα :hover σε αυτές. Ως αποτέλεσμα, η πρώτη εικόνα θα αλλάξει όταν τοποθετήστε το δείκτη του ποντικιού πάνω της. Σε αυτό το άρθρο, εξηγήσαμε πώς μπορείτε να αλλάξετε μια εικόνα στο hover χρησιμοποιώντας το :hover με ένα πρακτικό παράδειγμα.