CSS Property cursor
cursor defines the cursor shape.
Summary
| Item | Value |
|---|---|
| Initial value | auto |
| Inherited | Yes. |
| Version | CSS2 |
| JavaScript syntax | object.style.cursor="crosshair" |
| Applies to | All elements. |
CSS Syntax
cursor: url(address of cursor file) |
auto |
crosshair |
default |
pointer |
move |
e-resize |
ne-resize |
nw-resize |
n-resize |
se-resize |
sw-resize |
s-resize |
w-resize |
text |
wait |
help |
progress |
inherit
Property Values
The property values are listed in the following table.
| Value | Description |
|---|---|
| URL | A comma separated of URLs to load for custom cursors. |
| auto | Default. The browser will choose a cursor |
| crosshair | crosshair cursor |
| default | default cursor |
| e-resize | east edge resizable cursor |
| help | help cursor |
| move | movable cursor |
| n-resize | north edge resizable cursor |
| ne-resize | north/east edge resizable cursor |
| nw-resize | north/west edge resizable cursor |
| pointer | pointer cursor |
| progress | busy cursor |
| s-resize | south edge resizable cursor |
| se-resize | south/east edge resizable cursor |
| sw-resize | south/west edge resizable cursor |
| text | text cursor |
| w-resize | west edge resizable cursor |
| wait | busy cursor |
| inherit | inherit the cursor property from the parent element |
Browser compatibility
 |
 |
 |
 |
 |
|
|---|---|---|---|---|---|
cursor |
Yes | Yes | Yes | Yes | Yes |
Example
An example showing how to use cursor CSS property.
<!DOCTYPE HTML>
<html>
<!--from w w w .j a v a2s . c om-->
<body>
<p>Move the mouse over the words to see the cursor change:</p>
<span style="cursor:auto"> Auto</span><br />
<span style="cursor:crosshair"> Crosshair</span><br />
<span style="cursor:default"> Default</span><br />
<span style="cursor:pointer"> Pointer</span><br />
<span style="cursor:move"> Move</span><br />
<span style="cursor:e-resize"> e-resize</span><br />
<span style="cursor:ne-resize"> ne-resize</span><br />
<span style="cursor:nw-resize"> nw-resize</span><br />
<span style="cursor:n-resize"> n-resize</span><br />
<span style="cursor:se-resize"> se-resize</span><br />
<span style="cursor:sw-resize"> sw-resize</span><br />
<span style="cursor:s-resize"> s-resize</span><br />
<span style="cursor:w-resize"> w-resize</span><br />
<span style="cursor:text"> text</span><br />
<span style="cursor:wait"> wait</span><br />
<span style="cursor:help"> help</span>
</body>
</html>