CSS cursor Property | Appearance of a cursor is over

admin December 28, 2022February 24, 2023

The cursor property specifies the mouse cursor to be displayed when pointing over an element. CSS can generate a bunch of different mouse cursors. The cursor property control the appearance of a cursor.

Value	Description	Css
alias	The cursor indicates an alias of something is to be created	.alias {cursor: alias;}
all-scroll	The cursor indicates that something can be scrolled in any direction	.all-scroll {cursor: all-scroll;}
auto	Default. The browser sets a cursor	.auto {cursor: auto;}
cell	The cursor indicates that a cell (or set of cells) may be selected	.cell {cursor: cell;}
context-menu	The cursor indicates that a context-menu is available	.context-menu {cursor: context-menu;}
col-resize	The cursor indicates that the column can be resized horizontally	.col-resize {cursor: col-resize;}
copy	The cursor indicates something is to be copied	.copy {cursor: copy;}
crosshair	The cursor render as a crosshair	.crosshair {cursor: crosshair;}
default	The default cursor	.default {cursor: default;}
e-resize	The cursor indicates that an edge of a box is to be moved right (east)	.e-resize {cursor: e-resize;}
ew-resize	Indicates a bidirectional resize cursor	.ew-resize {cursor: ew-resize;}
grab	The cursor indicates that something can be grabbed	.grab {cursor: grab;}
grabbing	The cursor indicates that something can be grabbed	.grabbing {cursor: grabbing;}
help	The cursor indicates that help is available	.help {cursor: help;}
move	The cursor indicates something is to be moved	.move {cursor: move;}
n-resize	The cursor indicates that an edge of a box is to be moved up (north)	.n-resize {cursor: n-resize;}
ne-resize	The cursor indicates that an edge of a box is to be moved up and right (north/east)	.ne-resize {cursor: ne-resize;}
nesw-resize	Indicates a bidirectional resize cursor	.nesw-resize {cursor: nesw-resize;}
ns-resize	Indicates a bidirectional resize cursor	.ns-resize {cursor: ns-resize;}
nw-resize	The cursor indicates that an edge of a box is to be moved up and left (north/west)	.nw-resize {cursor: nw-resize;}
nwse-resize	Indicates a bidirectional resize cursor	.nwse-resize {cursor: nwse-resize;}
no-drop	The cursor indicates that the dragged item cannot be dropped here	.no-drop {cursor: no-drop;}
none	No cursor is rendered for the element	.none {cursor: none;}
not-allowed	The cursor indicates that the requested action will not be executed	.not-allowed {cursor: not-allowed;}
pointer	The cursor is a pointer and indicates a link	.pointer {cursor: pointer;}
progress	The cursor indicates that the program is busy (in progress)	.progress {cursor: progress;}
row-resize	The cursor indicates that the row can be resized vertically	.row-resize {cursor: row-resize;}
s-resize	The cursor indicates that an edge of a box is to be moved down (south)	.s-resize {cursor: s-resize;}
se-resize	The cursor indicates that an edge of a box is to be moved down and right (south/east)	.se-resize {cursor: se-resize;}
sw-resize	The cursor indicates that an edge of a box is to be moved down and left (south/west)	.sw-resize {cursor: sw-resize;}
text	The cursor indicates text that may be selected	.text {cursor: text;}
URL	A comma separated list of URLs to custom cursors. Note: Always specify a generic cursor at the end of the list, in case none of the URL-defined cursors can be used	.url {cursor: url(myBall.cur),auto;}
vertical-text	The cursor indicates vertical-text that may be selected	—
w-resize	The cursor indicates that an edge of a box is to be moved left (west)	.w-resize {cursor: w-resize;}
wait	The cursor indicates that the program is busy	.wait {cursor: wait;}
zoom-in	The cursor indicates that something can be zoomed in	.zoom-in {cursor: zoom-in;}
zoom-out	The cursor indicates that something can be zoomed out	.zoom-out {cursor: zoom-out;}
initial	Sets this property to its default value.
inherit	Inherits this property from its parent element.