CSS cursor Property
Demo
CSS cursor Property
CSS cursor
property specifies the mouse cursor to be displayed when pointing over an element.
Example
Syntax
Using CSS
Using Javascript
Animatable
No, cursor property is not animatable. CSS Animatable Properties Reference.
Default Value
Default value for CSS cursor property is auto.
Property Value
The following table provides a list of values for CSS cursor
property.
Value | Explanation |
---|---|
alias | An alias or shortcut is to be created. |
all-scroll | The cursor indicates that something can be scrolled in any direction |
auto | Equivalent to 'text' when hovering text otherwise 'context-menu'. Default value. |
cell | The cursor indicates that the table cell or set of cells can be selected. |
context-menu | The cursor indicates that the context menu is available. |
col-resize | The cursor indicates that the item/column can be resized horizontally. |
copy | The cursor indicates that something is to be copied. |
crosshair | Cross cursor, often used to indicate selection in a bitmap. |
default | The default cursor |
e-resize | The cursor indicates that an edge of a box is to be moved right (east). |
ew-resize | The cursor indicates a bidirectional resize cursor pointing towards east-west. |
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 that the element is to be moved. |
n-resize | The cursor indicates that an edge of a box is to be moved up (north) |
ne-resize | The cursor indicates that an edge of a box is to be moved up and right (north/east) |
nesw-resize | Bidirectional resize cursor. |
ns-resize | The cursor indicates that an edge of a box is to be moved up and down (north/south) |
nwse-resize | Bidirectional resize cursor. |
no-drop | An item may not be dropped at the current location. |
none | No cursor is rendered. |
not-allowed | The cursor indicates that the requested action will not be carried out. |
pointer | A pointing hand indicates a link. |
progress | The cursor indicates that the program is busy in the background, but the user can still interact with the interface. |
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 (south) |
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) |
text | The cursor indicates text that may be selected |
URL | Use image file for cursor pointer. A comma separated list of URLs to custom cursors. |
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 (west). |
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 |
Using JavaScript
In the following example, we will demonstrate how to change the CSS cursor
property of an element using JavaScript.
Example
Reminder
Hi Developers, we almost covered 98.7% of CSS Tutorials with examples for quick and easy learning.
We are working to cover every Single Concept in CSS.
Please do google search for:
Join Our Channel
Join our telegram channel to get an instant update on depreciation and new features on HTML, CSS, JavaScript, jQuery, Node.js, PHP and Python.
This channel is primarily useful for Full Stack Web Developer.