Στο CSS, χρησιμοποιούνται διάφοροι τύποι δρομέων για διαφορετικά στοιχεία HTML και για να αλλάξετε τον τύπο του δρομέα, το ' δρομέας 'χρησιμοποιείται η ιδιοκτησία. Σας επιτρέπει να αλλάξετε τον τύπο του δρομέα και να ορίσετε την τιμή του δρομέα που θέλετε να εμφανίζεται στην οθόνη. Ως πρόσθετο χαρακτηριστικό, σας επιτρέπει επίσης να ορίσετε τη δική σας εικόνα δρομέα.
Σε αυτόν τον οδηγό, θα μάθετε:
- Τι είναι η ιδιότητα CSS του δρομέα
- Πώς να αλλάξετε τον κέρσορα σε εικόνα στο Hover χρησιμοποιώντας CSS
Λοιπόν, ας ξεκινήσουμε!
Τι είναι η ιδιότητα CSS 'δρομέας';
Για να ελέγξετε την εμφάνιση του ποντικιού πάνω από ένα στοιχείο HTML, το ' δρομέας ” μπορεί να χρησιμοποιηθεί η ιδιότητα του CSS. Επιτρέπει την αλλαγή του κανονικού δρομέα σε διαφορετικούς τύπους, όπως δρομέα αντιγραφής, δείκτη χειρός, λαβή και πολλά άλλα. Μπορείτε επίσης να ορίσετε τον δικό σας προσαρμοσμένο δρομέα ορίζοντας το url της εικόνας στην ιδιότητα δρομέα.
Σύνταξη
Η σύνταξη της ιδιότητας του δρομέα δίνεται ως εξής:
δρομέας: url ( ) ;Στην παραπάνω σύνταξη, αντιστοιχίστε τη διαδρομή της εικόνας στο ' url() ' που θέλετε να εμφανίσετε στην οθόνη.
Θα μεταβούμε τώρα στο παράδειγμα για να αλλάξουμε τον κανονικό δρομέα σε εικόνα κατά την τοποθέτηση του δείκτη.
Πώς να αλλάξετε τον κέρσορα σε εικόνα στο Hover χρησιμοποιώντας CSS;
Για να αλλάξετε τον κέρσορα σε μια εικόνα κατά την τοποθέτηση του δείκτη, πρώτα προσθέστε ένα στοιχείο σε HTML.
Παράδειγμα 1: Αλλαγή δρομέα σε εικόνα κατά την τοποθέτηση του δείκτη χρησιμοποιώντας την ιδιότητα δρομέα
Θα δημιουργήσουμε μια επικεφαλίδα
και όνομα κλάσης κουμπιού ' btn '.
HTML
< σώμα >< h1 > Αλλάξτε τον κέρσορα σε Εικόνα κατά το δείκτη του ποντικιού h1 >
< κουμπί τάξη = 'btn' > Κάντε κλικ στο Me κουμπί >
σώμα >
Επί του παρόντος, αν τοποθετήσετε το δείκτη του ποντικιού στο κουμπί θα εμφανιστεί ο προεπιλεγμένος δρομέας:
Τώρα μετακινηθείτε στο CSS και αλλάξτε τον κέρσορα στην εικόνα.
Στη συνέχεια, ορίστε τη διαδρομή της εικόνας στο ' url() '. Για παράδειγμα, έχουμε ορίσει «i με.svg ” ως την επιλεγμένη μας εικόνα. Στη συνέχεια, ορίστε την τιμή της ιδιότητας του δρομέα ως ' αυτο '.
CSS
.btn {δρομέας: url ( icon.svg ) , αυτόματο;
padding: 10px;
}
Αποθηκεύστε τον παραπάνω κώδικα και εκτελέστε το αρχείο HTML για να δείτε το ακόλουθο αποτέλεσμα:
Η δεδομένη έξοδος υποδεικνύει ότι ο κέρσορας έχει μετατραπεί επιτυχώς σε εικόνα κατά την τοποθέτηση του δείκτη.
Σημείωση: ' αυτο ' χρησιμοποιείται ως εναλλακτική επιλογή στην ιδιότητα δρομέα. όταν η εικόνα δεν φορτώνεται ή λείπει η διαδρομή του αρχείου ή το ίδιο το αρχείο, το προεπιλεγμένο εικονίδιο εμφανίζεται στην οθόνη λόγω της αυτόματης τιμής.
Παράδειγμα 2: Ρύθμιση του προεπιλεγμένου δρομέα στο Hover
Για παράδειγμα, θα δώσουμε τη διεύθυνση url της εικόνας και θα ορίσουμε μόνο την τιμή της ιδιότητας του δρομέα ως ' αυτο ”:
δρομέας: url ( ) , αυτόματο;Ως αποτέλεσμα, ο κέρσορας δεν θα αλλάξει όταν τοποθετείτε το δείκτη του ποντικιού πάνω από το κουμπί:
Παράδειγμα 3: Ρύθμιση εναλλακτικής εικόνας στο Hover
Στη θέση του auto, μπορείτε να ορίσετε διαφορετικές τιμές του δρομέα που θέλετε να εμφανίσετε ως εναλλακτική στην εικόνα. Για παράδειγμα, θα αλλάξουμε την τιμή της ιδιότητας του δρομέα από ' αυτο ' προς την ' δείκτης ”:
δρομέας: url ( ) , δείκτης;Όπως μπορείτε να δείτε στην παρακάτω έξοδο, ο κέρσορας μετατρέπεται σε δείκτη χειρός όταν τοποθετείται πάνω από το κουμπί:
Παρέχουμε την ευκολότερη μέθοδο για την αλλαγή της εικόνας του δρομέα κατά την τοποθέτηση του ποντικιού χρησιμοποιώντας CSS.
συμπέρασμα
Στο CSS, μπορείτε να αλλάξετε τον κέρσορα στην εικόνα κατά την αιώρηση χρησιμοποιώντας το ' δρομέας ” ιδιοκτησία. Επιτρέπει την αλλαγή ενός κανονικού δρομέα σε μια εικόνα εκχωρώντας το ' url ' της εικόνας στην ιδιότητα του δρομέα. Μπορείτε να εφαρμόσετε οποιονδήποτε τύπο δρομέα θέλετε να εμφανίζεται όταν έχει τοποθετηθεί σε ένα στοιχείο. Αυτό το άρθρο παρουσίασε τη μέθοδο αλλαγής του δρομέα σε δείκτη χειρός.