Η cursor
ιδιότητα στο CSS ελέγχει την εμφάνιση του δρομέα του ποντικιού όταν βρίσκεται πάνω από το στοιχείο στο οποίο έχει ρυθμιστεί αυτή η ιδιότητα. Προφανώς, ισχύει μόνο για προγράμματα περιήγησης / λειτουργικά συστήματα στα οποία υπάρχει ποντίκι και δρομέας. Χρησιμοποιούνται ουσιαστικά για το UX για να μεταδώσει την ιδέα συγκεκριμένης λειτουργικότητας. Γι 'αυτό προσπαθήστε να μην σπάσετε αυτό το περιθώριο.
Υπάρχουν πολλά:
.auto ( cursor: auto; ) .default ( cursor: default; ) .none ( cursor: none; ) .context-menu ( cursor: context-menu; ) .help ( cursor: help; ) .pointer ( cursor: pointer; ) .progress ( cursor: progress; ) .wait ( cursor: wait; ) .cell ( cursor: cell; ) .crosshair ( cursor: crosshair; ) .text ( cursor: text; ) .vertical-text ( cursor: vertical-text; ) .alias ( cursor: alias; ) .copy ( cursor: copy; ) .move ( cursor: move; ) .no-drop ( cursor: no-drop; ) .not-allowed ( cursor: not-allowed; ) .all-scroll ( cursor: all-scroll; ) .col-resize ( cursor: col-resize; ) .row-resize ( cursor: row-resize; ) .n-resize ( cursor: n-resize; ) .e-resize ( cursor: e-resize; ) .s-resize ( cursor: s-resize; ) .w-resize ( cursor: w-resize; ) .ns-resize ( cursor: ns-resize; ) .ew-resize ( cursor: ew-resize; ) .ne-resize ( cursor: ne-resize; ) .nw-resize ( cursor: nw-resize; ) .se-resize ( cursor: se-resize; ) .sw-resize ( cursor: sw-resize; ) .nesw-resize ( cursor: nesw-resize; ) .nwse-resize ( cursor: nwse-resize; )
Ο δρομέας μπορεί επίσης να είναι μια εικόνα:
.custom ( cursor: url(images/my-cursor.png.webp), auto; )
Μερικοί δρομείς μόνο WebKit:
-webkit-zoom-in -webkit-zoom-out -webkit-zoom-grab -webkit-zoom-grabbing
Περισσότερες πληροφορίες
- CSS Basic User Interface Module Level 3
- Έγγραφα Mozilla
Υποστήριξη προγράμματος περιήγησης
Αυτά τα δεδομένα υποστήριξης του προγράμματος περιήγησης προέρχονται από την Caniuse, η οποία έχει περισσότερες λεπτομέρειες. Ένας αριθμός υποδεικνύει ότι το πρόγραμμα περιήγησης υποστηρίζει τη λειτουργία σε αυτήν την έκδοση και νεότερη.
Επιφάνεια εργασίας
Χρώμιο | Firefox | ΙΕ | Ακρη | Σαφάρι |
---|---|---|---|---|
5 | 4 | 9 | 14 | 5 |
Κινητό / Tablet
Android Chrome | Android Firefox | Android | iOS Safari |
---|---|---|---|
88 | Οχι | 81 | Οχι |
Και για νεότερες τιμές, όπως zoom-in
και zoom-out
:
Αυτά τα δεδομένα υποστήριξης του προγράμματος περιήγησης προέρχονται από την Caniuse, η οποία έχει περισσότερες λεπτομέρειες. Ένας αριθμός υποδεικνύει ότι το πρόγραμμα περιήγησης υποστηρίζει τη λειτουργία σε αυτήν την έκδοση και νεότερη.
Επιφάνεια εργασίας
Χρώμιο | Firefox | ΙΕ | Ακρη | Σαφάρι |
---|---|---|---|---|
4 * | 2 * | Οχι | 12 | 3.1 * |
Κινητό / Tablet
Android Chrome | Android Firefox | Android | iOS Safari |
---|---|---|---|
88 | Οχι | 81 | Οχι |