Quick Reference
The cursor property specifies the type of mouse cursor to be displayed when over an element. Otherwise, the default cursor will be shown.
.my_div {
cursor: crosshair;
}Default
| Default value | auto |
| Inherited values | yes |
| Can it be animated? | no |
These are the allowed values.
| Value | Description |
|---|---|
| alias | The cursor indicates an alias of something is to be created |
| all-scroll | The cursor indicates that something can be scrolled in any direction |
| auto | The browser sets a cursor (default) |
| cell | The cursor indicates that a cell (or set of cells) may be selected |
| context-menu | The cursor indicates that a context-menu is available |
| col-resize | The cursor indicates that the column can be resized horizontally |
| copy | The cursor indicates something is to be copied |
| crosshair | The cursor render as a crosshair |
| default | The default cursor for the element it's over or for what the user is doing with it |
| e-resize | The cursor indicates that an edge of a box is to be moved right |
| ew-resize | Indicates a bidirectional resize cursor |
| grab | The cursor indicates that something can be grabbed |
| grabbing | The cursor indicates that something can be grabbed |
| help | The cursor indicates that help is available |
| move | The cursor indicates something is to be moved |
| n-resize | The cursor indicates that an edge of a box is to be moved up |
| ne-resize | The cursor indicates that an edge of a box is to be moved up and right |
| nesw-resize | Indicates a bidirectional resize cursor |
| ns-resize | Indicates a bidirectional resize cursor |
| nw-resize | The cursor indicates that an edge of a box is to be moved up and left |
| nwse-resize | Indicates a bidirectional resize cursor |
| no-drop | The cursor indicates that the dragged item cannot be dropped here |
| none | No cursor is rendered for the element |
| not-allowed | The cursor indicates that the requested action will not be executed |
| pointer | The cursor is a pointer and indicates a link |
| progress | The cursor indicates that the program is busy |
| row-resize | The cursor indicates that the row can be resized vertically |
| s-resize | The cursor indicates that an edge of a box is to be moved down |
| se-resize | The cursor indicates that an edge of a box is to be moved down and right |
| sw-resize | The cursor indicates that an edge of a box is to be moved down and left |
| text | The cursor indicates text that may be selected |
| URL | A comma separated list of URLs to custom cursors (always specify a generic cursor at the end of the list, in case the custom cursors fail to load) |
| vertical-text | The cursor indicates vertical-text that may be selected |
| w-resize | The cursor indicates that an edge of a box is to be moved left |
| wait | The cursor indicates that the program is busy |
| zoom-in | The cursor indicates that something can be zoomed in |
| zoom-out | The cursor indicates that something can be zoomed out |
| initial | Sets this property to its default value |
| inherit | Inherits this property from its parent element |
Using JavaScript
The HTML element can also be styled using JavaScript and the element’s id.
document.getElementById('my_div').style.cursor = 'crosshair';<button onclick='my_function()'>Click Here</button>
<script>
function my_function() {
document.getElementById('my_div').style.cursor = 'crosshair';
}
</script>CSS Notes:
- The “inherit”, “initial” and “unset” keywords can be used with any CSS property to set its value
- In CSS there are many ways to express a color value in a property
We’d like to acknowledge that we learned a great deal of our coding from W3Schools and TutorialsPoint, borrowing heavily from their teaching process and excellent code examples. We highly recommend both sites to deepen your experience, and further your coding journey. We’re just hitting the basics here at 1SMARTchicken.