CSS cursor property specifies the type of mouse cursor for an element when we hover over it.
Hover over the below boxes to see their cursor type:
Hover Over Me
Hover Over Me
Hover Over Me
Hover Over Me
Hover Over Me
Try out the example below:
Example:
p.default{
cursor: default;
}
p.progress{
cursor: progress;
}
p.not-allowed{
cursor: not-allowed;
}
It is also possible to use an image as a mouse cursor. If the specified image is not found, the browser uses the default cursor.
In the example below we have used ‘center.svg’ image as a cursor type. If this image is not available, the browser will use pointer type cursor as a fallback. Try it out to see how it works:
Example:
p{
cursor: url('images/center.svg'), pointer;
}
Try out the below example to see all cursor types available in CSS:
Example:
p.alias {cursor: alias;}
p.all-scroll {cursor: all-scroll;}
p.auto {cursor: auto;}
p.cell {cursor: cell;}
p.context-menu {cursor: context-menu;}
p.col-resize {cursor: col-resize;}
p.copy {cursor: copy;}
p.crosshair {cursor: crosshair;}
p.default {cursor: default;}
p.e-resize {cursor: e-resize;}
p.ew-resize {cursor: ew-resize;}
p.grab {cursor: grab;}
p.grabbing {cursor: grabbing;}
p.help {cursor: help;}
p.move {cursor: move;}
p.n-resize {cursor: n-resize;}
p.ne-resize {cursor: ne-resize;}
p.nesw-resize {cursor: nesw-resize;}
p.ns-resize {cursor: ns-resize;}
p.nw-resize {cursor: nw-resize;}
p.nwse-resize {cursor: nwse-resize;}
p.no-drop {cursor: no-drop;}
p.none {cursor: none;}
p.not-allowed {cursor: not-allowed;}
p.pointer {cursor: pointer;}
p.progress {cursor: progress;}
p.row-resize {cursor: row-resize;}
p.s-resize {cursor: s-resize;}
p.se-resize {cursor: se-resize;}
p.sw-resize {cursor: sw-resize;}
p.text {cursor: text;}
p.w-resize {cursor: w-resize;}
p.wait {cursor: wait;}
p.zoom-in {cursor: zoom-in;}
p.zoom-out {cursor: zoom-out;}
CSS Syntax
The cursor property has the following syntax:
cursor: none|auto|cursor_type|url|initial|inherit;
Property Values
The cursor property accepts the following values:
| none | Specifies no cursor. The cursor remains hidden. |
| auto | Default value. The browser itself sets the cursor. |
| alias | It shows an alias or shortcut |
| all-scroll | It shows that scrolling can be done in any side. |
| cell | It shows that a table cell can be selected. |
| context-menu | It indicates that the context-menu is available. |
| col-resize | It indicates that an element can be resized horizontally. |
| copy | It indicates that something can be copied. |
| crosshair | It shows a crosshair cursor. |
| default | It shows a platform-dependent default cursor. Generally an arrow. |
| e-resize | It shows a horizontal resize towards the east(right) direction. |
| ew-resize | It indicates that the item can be resized towards the east-west. |
| grab | It indicates that something is to be grabbed. |
| grabbing | It indicates that something is being grabbed. |
| help | It indicates that help about the current item is available. |
| move | It indicates that something is to be moved. |
| n-resize | It shows a vertical resize towards the north(top) direction. |
| ne-resize | It indicates that the item can be resized towards the north-east. |
| nesw-resize | It indicates bidirectional resize. |
| ns-resize | It indicates that the item can be resized towards the north-south(vertical). |
| nw-resize | It indicates that the item can be resized in the north-west direction. |
| nwse-resize | It indicates bidirectional resize. |
| no-drop | It indicates that the item can not be dropped at the current location. |
| not-allowed | It indicates that the requested action can not be carried out. |
| pointer | It indicates a pointer cursor and generally used for hovering over links. |
| progress | It indicates that the action is still in progress. |
| row-resize | It indicates that the item can be resized vertically. |
| s-resize | It indicates a vertically down resize(south). |
| se-resize | It indicates that the item can be resized towards the south-east. |
| sw-resize | It indicates that the item can be resized towards the south-west. |
| text | This cursor is used to hover over a text. |
| vertical-text | It indicates that the text can be selected vertically. |
| w-resize | It indicates a horizontal resize towards the west(left) direction. |
| wait | It indicates that the program is still not completed and it’s running in the background. |
| zoom-in | It indicates that the item can be zoomed-in. |
| zoom-out | It indicates that the item can be zoomed-out. |
| url(source) | It sets the given image as the mouse cursor. |
| initial | Sets the cursor property to its default value(auto). |
| inherit | Inherits the cursor property from the parent element. |
General Info
| Default Value | auto |
| Inherited | Yes |
| JavaScript Usage | element.style.cursor= “pointer” |
