HTML, CSS, JavaScript Tutorial

CSS Property: cursor

The CSS (CSS2) cursor property indicates the type of cursor to be displayed when pointing to an element. Usually this property is set in a manner that conventionally indicates what is likely to happen next (if the cursor is clicked).

Valid property values (other than inherit and initial) are:

Value	Description
alias	Indicates alias is to be created
all-scroll	Indicates that something can be scrolled in any direction
auto	(default value). Browser selects cursor format
cell	Indicates a cell (or set of cells) can be selected
context-menu	Indicates a context-menu is available
col-resize	Indicates column can be resized horizontally
copy	Indicates something to be copied
crosshair	Cursor appears as a crosshair
default	Cursor appears as the default cursor
e-resize	Indicates edge of box can be moved right (i.e. ‘east’)
ew-resize	Indicates a bidirectional resize cursor
grab	Indicates something can be grabbed
grabbing	Indicates something can be grabbed
help	Indicates help is available
move	Indicates can move something
n-resize	Indicates edge of box can be moved up (i.e. ‘north’)
ne-resize	Indicates edge of a box can be moved up and right (i.e. ‘north-east’)
nesw-resize	Indicates a bidirectional resize cursor
ns-resize	Indicates a bidirectional resize cursor
nw-resize	Indicates edge of a box can be moved up and left (i.e. ‘north-west’)
nwse-resize	Indicates a bidirectional resize cursor
no-drop	Indicates can’t drop dragged item here
none	No cursor shown
not-allowed	Indicates requested action won’t be executed
pointer	Indicates a link
progress	Indicates program is busy
row-resize	Indicates row can be resized vertically
s-resize	Indicates edge of box can be moved down (i.e. ‘south’)
se-resize	Indicates edge of a box can be moved down and right (i.e. ‘south-east’)
sw-resize	Indicates edge of a box can be moved down and left (i.e. ‘south-west’)
text	Indicates text may be selected
URL	A comma separated list of URLs pointing to custom cursors. You should ideally specify a generic cursor at the end of the list (in case none of the URL-defined cursors can be used)
vertical-text	Indicates vertical-text can be selected
w-resize	Indicates edge of box can be moved left (i.e. ‘west’)
wait	Indicates program is busy
zoom-in	Indicates something can be zoomed in
zoom-out	Indicates something can be zoomed out

Default Value:	auto
JavaScript syntax:	e.g. object.style.cursor="zoom-in"
Inherited:	Yes
Animatable:	No

EXAMPLE:

HTML USED IN THIS EXAMPLE:

<!DOCTYPE html>
<html> <!-- Copyright (c) Nematrian Limited 2018 -->
<head>
<style>
p {width: 200px; border: thin solid red;}
p.x1 {cursor: no-drop}
</style>
</head>
<body>
Move cursor over element
<p>Element with default property</p>
<p class="x1">Property set using in-file HTML style</p>
<p id="x2">Property set using JavaScript</p>

<script>
document.getElementById("x2").style.cursor = "no-drop";
</script>

</body>
</html>

FUNCTION THAT MAY ASSIST IN TESTING WHETHER FEATURE IS SUPPORTED:

function isSupportedCSSPropertyCursor() {
  var x = document.createElement("DIV"); x.style.cursor = "no-drop"; return (window.getComputedStyle(x, null).cursor == "no-drop");
}

NAVIGATION LINKS
Contents | Prev | Next | CSS Properties

Desktop view | Switch to Mobile