Δρομέας - CSS-Κόλπα

Anonim

Η 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 Οχι