CSS Cursors, TutorialsPoint, CSS Cursors Tutorial

CSS Cursors

The cursor property of CSS allows you to specify the type of cursor that should be displayed to the user.

The browsers typically display the mouse pointer over any blank part of a web page, the gloved hand over any linked or clickable item and the edit cursor over any text or text field. With CSS you can redefine those properties to display a variety of different cursors.

The following table shows the possible values for the cursor properties:

Value	Description
auto	The browser determines the cursor to display based on the current context. For example, an 'I' over text, a 'hand' over a link, and so on.
default	The default cursor for the platform, without regard for the context, typically an arrow.
context-menu	Indicates that a context-menu is available.
crosshair	A crosshair or plus sign
pointer	A pointing hand (in IE 4 this value is hand).
progress	A progress indicator. The program is performing some processing but the user can still interact with the interface (unlike for wait).
move	The 'I' bar
text	The I bar.
wait	An hour glass.
help	A question mark or balloon, ideal for use over help buttons.
cell	Indicates that a cell (or set of cells) can be selected.
alias	Indicates that an alias or shortcut is to be created.
copy	Indicates that something can be copied.
not-allowed	Indicates that something cannot be done.
e-resize	The cursor indicates that an edge of a box is to be moved right (east).
ne-resize	The cursor indicates that an edge of a box is to be moved up and right (north/east).
nw-resize	The cursor indicates that an edge of a box is to be moved up and left (north/west).
n-resize	The cursor indicates that an edge of a box is to be moved up (north).
se-resize	The cursor indicates that an edge of a box is to be moved down and right (south/east).
sw-resize	The cursor indicates that an edge of a box is to be moved down and left (south/west).
s-resize	The cursor indicates that an edge of a box is to be moved down (south).
w-resize	The cursor indicates that an edge of a box is to be moved left (west).
zoom-in	Indicates that something can be zoomed in.
zoom-out	Indicates that something can be zoomed out.

CSS Cursors

<!DOCTYPE html>  
<html>  
<head>
<title>CSS Cursors</title>
 
<style type="text/css">
   .my_cursors{ height:400px; overflow-y:scroll; padding:0px 20px;}
</style>
 
</head>
<body>
 
<div class="my_cursors">
 
<h4>CSS Cursors :</h4>
 
<p style="cursor:auto">Auto</p>
<p style="cursor:default">Default</p>
<p style="cursor:context-menu">Context-menu</p>
<p style="cursor:crosshair">Crosshair</p>
<p style="cursor:pointer">Pointer</p>
<p style="cursor:progress">Progress</p>
<p style="cursor:move">Move</p>
<p style="cursor:text">text</p>
<p style="cursor:wait">wait</p>
<p style="cursor:help">help</p>
<p style="cursor:cell">Cell</p>
<p style="cursor:alias">Alias</p>
<p style="cursor:copy">Copy</p>
<p style="cursor:not-allowed">Not-allowed</p>
<p style="cursor:e-resize">e-resize</p>
<p style="cursor:ne-resize">ne-resize</p>
<p style="cursor:nw-resize">nw-resize</p>
<p style="cursor:n-resize">n-resize</p>
<p style="cursor:se-resize">se-resize</p>
<p style="cursor:sw-resize">sw-resize</p>
<p style="cursor:s-resize">s-resize</p>
<p style="cursor:w-resize">w-resize</p>
<p style="cursor:zoom-in">Zoom-in</p>
<p style="cursor:zoom-out">Zoom-out</p>
 
</div>
 
</body>
</html>

Output :

CSS Cursors :

Auto

Default

Context-menu

Crosshair

Pointer

Progress

Move

text

wait

help

Cell

Alias

Copy

Not-allowed

e-resize

ne-resize

nw-resize

n-resize

se-resize

sw-resize

s-resize

w-resize

Zoom-in

Zoom-out

CSS Tutorial