CSS Cursor
CSS Cursor the types of cursor displayed to the user. There are a lot of values for CSS cursor property.
Here is a list of some values:
| Values | Description |
|---|---|
| auto | Shape of the cursor depends on the area it is over |
| pointer | Shape of a pointing hand |
| default | The default cursor (an arrow) |
| crosshair | Shape of a plus sign |
| move | Shape of a moving sign |
| text | Shape of a I bar |
| wait | Shape of a hour glass |
| help | Shape of a question mark or balloon |
| e-resize | Shape of an edge of a box is to be moved right |
| ne-resize | Shape of an edge of a box is to be moved up and right |
| nw-resize | Shape of an edge of a box is to be moved up and left |
| n-resize | Shape of an edge of a box is to be moved up |
| se-resize | Shape of an edge of a box is to be moved down and right |
| sw-resize | Shape of an edge of a box is to be moved down and left |
| s-resize | Shape of an edge of a box is to be moved down |
| w-resize | Shape of an edge of a box is to be moved left |
cursor Property Example
Here is an example using cursor property:
Example:
.auto
{
cursor: auto;
}
.pointer {
cursor: pointer;
}
.crosshair {
cursor: crosshair;
}
.move {
cursor: move;
}
.wait {
cursor: wait;
}
.e-resize {
cursor: e-resize;
}
.nw-resize {
cursor: nw-resize;
}
.s-resize {
cursor: s-resize;
}
cursor: auto;
}
.pointer {
cursor: pointer;
}
.crosshair {
cursor: crosshair;
}
.move {
cursor: move;
}
.wait {
cursor: wait;
}
.e-resize {
cursor: e-resize;
}
.nw-resize {
cursor: nw-resize;
}
.s-resize {
cursor: s-resize;
}
Run Example