Kursors - CSS-triki

Anonim

cursorĪpašums CSS kontroli, ko peles kursoru izskatīsies, kad tas atrodas virs elementa, kurā šis īpašums ir noteikta. Acīmredzot tas ir svarīgi tikai pārlūkprogrammās / operētājsistēmās, kurās ir pele un kursors. Tos galvenokārt izmanto UX, lai nodotu ideju par noteiktu funkcionalitāti. Tāpēc mēģiniet nepārkāpt šo pielaidi.

Ir ķekars no tiem:

.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; )

Kursors var būt arī attēls:

.custom ( cursor: url(images/my-cursor.png.webp), auto; )

Daži WebKit tikai kursori:

-webkit-zoom-in -webkit-zoom-out -webkit-zoom-grab -webkit-zoom-grabbing

Vairāk informācijas

  • CSS pamata lietotāja saskarnes modulis, 3. līmenis
  • Mozilla Docs

Pārlūkprogrammas atbalsts

Šie pārlūka atbalsta dati ir no Caniuse, kurai ir sīkāka informācija. Cipars norāda, ka pārlūks atbalsta šo un jaunākās versijas funkciju.

Darbvirsma

Chrome Firefox IE Mala Safari
5 4 9 14 5

Mobilais / planšetdators

Android Chrome Android Firefox Android iOS Safari
88 81.

Un jaunākām vērtībām, piemēram, zoom-inun zoom-out:

Šie pārlūka atbalsta dati ir no Caniuse, kurai ir sīkāka informācija. Cipars norāda, ka pārlūks atbalsta šo un jaunākās versijas funkciju.

Darbvirsma

Chrome Firefox IE Mala Safari
4 * 2 * 12 3,1 *

Mobilais / planšetdators

Android Chrome Android Firefox Android iOS Safari
88 81.