Kursor - Trik CSS | CSS Almanak 2024

The cursorproperti di kontrol CSS apa kursor mouse akan terlihat seperti ketika ia berada di atas elemen di mana properti ini diatur. Jelas, ini hanya relevan di browser / sistem operasi yang di dalamnya terdapat mouse dan kursor. Mereka pada dasarnya digunakan untuk UX untuk menyampaikan gagasan tentang fungsionalitas tertentu. Jadi cobalah untuk tidak merusak kemampuan itu.

Ada banyak dari mereka:

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

Kursor juga bisa berupa gambar:

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

Beberapa kursor WebKit saja:

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

Informasi lebih lanjut

Modul Antarmuka Pengguna Dasar CSS Level 3
Mozilla Docs

Dukungan browser

Data dukungan browser ini berasal dari Caniuse, yang lebih detail. Angka menunjukkan bahwa browser mendukung fitur pada versi tersebut dan yang lebih baru.

Desktop

Chrome	Firefox	YAITU	Tepi	Safari
5	4	9	14	5

Ponsel / Tablet

Android Chrome	Android Firefox	Android	iOS Safari
88	Tidak	81	Tidak

Dan untuk nilai yang lebih baru, seperti zoom-indan zoom-out:

Data dukungan browser ini berasal dari Caniuse, yang lebih detail. Angka menunjukkan bahwa browser mendukung fitur pada versi tersebut dan yang lebih baru.