FANDOM


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;
}

External Links