CSS cursor Property
 Complete CSS Reference
Definition
The cursor property specifies the type of cursor to be displayed when
pointing on an element.
Inherited: Yes
JavaScript Syntax
CSS properties can also be dynamically changed with a JavaScript.
Scripting Syntax: object.style.cursor="text"
In our HTML DOM tutorial you can find more details about the
cursor property.
In our HTML DOM tutorial you can also find a full
Style Object Reference.
Example
h2
{
cursor: crosshair
}
p
{
cursor : url("first.cur"), url("second.cur"), pointer
}
|
Possible Values
| Value |
Description |
| url |
The url of a custom cursor to be used.
Note: Always define a generic cursor at the end of the list in
case none of the url-defined cursors can be used |
| default |
The default cursor (often an arrow) |
| auto |
Default. The browser sets a cursor |
| crosshair |
The cursor render as a crosshair |
| pointer |
The cursor render as a pointer (a hand) that indicates a link |
| move |
The cursor indicates something that should be moved |
| 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) |
| text |
The cursor indicates text |
| wait |
The cursor indicates that the program is busy (often a
watch or an hourglass) |
| help |
The cursor indicates that help is available (often a
question mark or a balloon) |
Try-It-Yourself Demos
Change the cursor
This example demonstrates how to change the cursor.
Complete CSS Reference
|
