The CSS cursor
property allow us to define or modify various cursor type when the mouse pointer moves on specific elements. There are various types of cursors option available in CSS, which are dived into eight categories-
General Cursors:- It includes auto
, default
, and none
.
Link Cursor:- It includes pointer
.
Scroll Cursor:- It includes all-scroll
.
Selection Cursors:- It includes context-menu
, help
, wait
, and progress
.
Status Cursors:- It includes crosshair
, cell
, text
, vertical-text
.
Drag & Drop Cursors:- It includes alias
, copy
, move
, no-drop
, not-allowed
.
Zoom Cursors:- It includes zoom-in
, zoom-out
.
Grab Cursors:- It includes grab
, grabbing
.
Resizing Cursors:- It includes e-resize
, n-resize
, ne-resize
, nw-resize
, s-resize
, se-resize
, sw-resize
, w-resize
, ew-resize
, ns-resize
, nesw-resize
, nwse-resize
, col-resize
, row-resize
.
.auto { cursor: auto; }
.default { cursor: default; }
.none { cursor: none; }
.pointer { cursor: pointer; }
.all-scroll { cursor: all-scroll; }
.context-menu { cursor: context-menu; }
.help { cursor: help; }
.wait { cursor: wait; }
.progress { cursor: progress; }
.crosshair { cursor: crosshair; }
.cell { cursor: cell; }
.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; }
.zoom-in { cursor: zoom-in; }
.zoom-out { cursor: zoom-out; }
.grab { cursor: -webkit-grab; cursor: grab; }
.grabbing { cursor: -webkit-grabbing; cursor: grabbing; }
.e-resize { cursor: e-resize; }
.n-resize { cursor: n-resize; }
.ne-resize { cursor: ne-resize; }
.nw-resize { cursor: nw-resize; }
.s-resize { cursor: s-resize; }
.se-resize { cursor: se-resize; }
.sw-resize { cursor: sw-resize; }
.w-resize { cursor: w-resize; }
.ew-resize { cursor: ew-resize; }
.ns-resize { cursor: ns-resize; }
.nesw-resize { cursor: nesw-resize; }
.nwse-resize { cursor: nwse-resize; }
.col-resize { cursor: col-resize; }
.row-resize { cursor: row-resize; }
Custom Cursors:- CSS cursor
property allow us to define our own custom cursors, which handles a comma-separated list of user defined cursor values followed by the generic cursor. If the first cursor value is unsupported or not found, then it will take next cursor value in the comma-separated list, and so on until a usable cursor value is found. If none of the cursor values are valid or supported by the browser, then the generic cursor specified at the end of the list will be used.
a {
cursor: url('image.svg'), url('image.cur'), default;
}
We can also define a custom position for the cursor by adding x and y coordinates like below-
a {
cursor: url('image.svg') 10 12;
}