Cursors

The cursor property allows a specific cursor type to be displayed:

 

Value Description
auto Depends on context area
crosshair Crosshair, or plus sign
default Arrow
pointer Pointing hand
move North, east south, west arrows
e-resize Horizontal east, west arrows
ne-resize Diagonal north east arrows
nw-resize Diagonal north west arrows
n-resize Vertical north south arrows
se-resize Diagonal south east arrows
sw-resize Diagonal south west arrows
s-resize Vertical north south arrows
w-resize Horizontal east west arrows
text The I bar
wait Spinning circle or Hour glass
help Question mark or balloon
<url> source of cursor image file

 

Example showing all the above:

<!DOCTYPE html>
<html>
	<head>
		<title>My Document Title</title>
	</head>
	<body>
		<p>Move the mouse over the words to see the cursor change:</p>
		<div style="cursor:auto;">Auto</div>
		<div style="cursor:crosshair;">Crosshair</div>
		<div style="cursor:default;">Default</div>
		<div style="cursor:pointer;">Pointer</div>
		<div style="cursor:move;">Move</div>
		<div style="cursor:e-resize;">e-resize</div>
		<div style="cursor:ne-resize;">ne-resize</div>
		<div style="cursor:nw-resize;">nw-resize</div>
		<div style="cursor:n-resize;">n-resize</div>
		<div style="cursor:se-resize;">se-resize</div>
		<div style="cursor:sw-resize;">sw-resize</div>
		<div style="cursor:s-resize;">s-resize</div>
		<div style="cursor:w-resize;">w-resize</div>
		<div style="cursor:text;">text</div>
		<div style="cursor:wait;">wait</div>
		<div style="cursor:help;">help</div>
		<div style="cursor:url('/cssExamples/cursor.png'), auto;">image</div>
	</body>
</html>

Save & refresh browser:

Move the mouse over the words to see the cursor change:
 

Auto
Crosshair
Default
Pointer
Move
e-resize
ne-resize
nw-resize
n-resize
se-resize
sw-resize
s-resize
w-resize
text
wait
help
image

Leave a Reply