The cursor property is used in CSS and certain HTML elements. It specifies the mouse cursor displayed when the pointer is hovered over the selected text being influenced by this property.
Values[]
Hover over the explanation of each value for a live example.
| Value | Description |
|---|---|
auto |
The browser determines the cursor to display based on the current context. |
default |
Shows the default cursor, usually an arrow. |
none |
No cursor is displayed. |
context-menu |
A context menu is available under the cursor. |
help |
Shows a question mark symbol to indicate that help is available. |
pointer |
Shows a hand, typically used when hovering over links. |
progress |
Shows that the program is busy in the background but the user can still interact with the interface (unlike for wait). Displays a loading symbol or an hourglass. |
wait |
The program is busy (displays an hourglass or a watch). |
cell |
Indicates that cells can be selected (in a table, for example). |
crosshair |
Displays an equilateral cross, often used to indicate selection in a bitmap. |
text |
Indicates that text can be selected, typically in an I-beam symbol. |
vertical-text |
Indicates that vertical text can be selected, typically in a sideways I-beam symbol. |
alias |
Indicates that an alias or shortcut is to be created. |
copy |
Indicates that something can be copied. |
move |
Displays a crosshair symbol with arrowheads showing that the hovered object may be moved. |
no-drop |
Cursor shows that a drop is not allowed at the current location. (On Windows, no-drop is the same as not-allowed.)
|
not-allowed |
Cursor shows that something cannot be done. |
all-scroll |
Cursor shows that something can be scrolled in any direction (panned). (On Windows, all-scroll is the same as move.
|
col-resize |
The item/column can be resized horizontally. Often shown as arrows pointing left and right with a vertical bar separating them. |
row-resize |
The item/row can be resized vertically. Often shown as arrows pointing up and down with a horizontal bar separating them. |
n-resize |
Some edge is to be moved. For example, the se-resize cursor is used when the movement starts from the south-east corner of the box.
|
e-resize |
Hover over value for effect. |
s-resize |
Hover over value for effect. |
w-resize |
Hover over value for effect. |
ne-resize |
Hover over value for effect. |
nw-resize |
Hover over value for effect. |
se-resize |
Hover over value for effect. |
sw-resize |
Hover over value for effect. |
ew-resize |
Indicates that there is a bidirectional resize cursor. (Can resize both ways.) |
ns-resize |
Hover over value for effect. |
nesw-resize |
Hover over value for effect. |
nwse-resize |
Hover over value for effect. |
You can also use an image, followed by a fallback value, like this :
<span style="cursor: url('http://images3.wikia.nocookie.net/__cb20100725000619/htmlcss/images/3/38/Code.png'), pointer;">Hover over the text.</span>
HTML example:
<span style="cursor:not-allowed;">Hover over this text.</span>
which will produce: Hover over this text.
CSS example:
h1 {
cursor:not-allowed;
}