Export (0) Print
Expand All
top
Expand Minimize

cursor

Sets the type of pointer to be displayed as the pointer moves over the object.

Syntax

{ cursor: sCursor }

Possible values

sCursor

String that specifies one or more of the following possible values, separated by commas:

auto

Default. Browser determines which pointer to display based on the current context.

all-scroll

Arrows pointing up, down, left, and right with a dot in the middle, indicating that the page can be scrolled in any direction.

col-resize

Arrows pointing left and right with a vertical bar separating them, indicating that the item/column can be resized horizontally.

crosshair

Simple cross hair.

default

Platform-dependent default pointer; usually an arrow.

hand

Hand with the first finger pointing up, as when the user moves the pointer over a link.

help

Arrow with question mark, indicating that help is available.

move

Crossed arrows, indicating that something is to be moved.

no-drop

Hand with a small circle with a line through it, indicating that the dragged item cannot be dropped at the current pointer location.

not-allowed

Circle with a line through it, indicating that the requested action will not be performed.

pointer

Hand with the first finger pointing up, as when the user moves the pointer over a link. Identical to hand.

progress

Arrow with an hourglass next to it, indicating that a process is running in the background. User interaction with the page is unaffected.

row-resize

Arrows pointing up and down with a horizontal bar separating them, indicating that the item/row can be resized vertically.

text

Editable text; usually an I-bar.

url( uri )

Pointer is defined by the author, using a custom Uniform Resource Identifier (URI), such as url('mycursor.cur'). Pointers of type .CUR and .ANI are the only supported pointer types.

vertical-text

Editable vertical text, indicated by a horizontal I-bar.

wait

Hourglass or watch, indicating that the program is busy and the user should wait.

*-resize

Arrows, indicating an edge is to be moved. The asterisk (*) can be n, ne, nw, s, se, sw, e, or w, where each represents a compass direction.

This property has a default value of auto. It is inherited.

Remarks

The property handles a comma-separated list of values. If the browser cannot find or is otherwise unable to use the first pointer specified, it moves to the next pointer in the comma-separated list and continues until it finds a usable pointer. If the browser cannot use any of the pointers that are listed, the pointer does not change.

Examples

The following example uses the cursor property to change the pointer as it passes over an object. This example uses a call to an embedded (global) style sheet to set the pointer to hand as the pointer passes over all paragraphs:

<style>
    p {cursor: hand;}
</style>

This example uses inline scripting to set the pointer to hand as the pointer passes over the paragraph:

<p onmouseover="this.style.cursor='hand'">

Standards information

This property is defined in Cascading Style Sheets (CSS), Level 2 (CSS2) Ee341481.xtlink_newWindow(en-us,Expression.40).png.

Applies to

a, address, applet, b, big, blockquote, body, caption, center, cite, code, col, colgroup, custom, dd, defaults, dfn, div, dl, dt, em, embed, fieldset, form, hn, hr, html, i, iframe, img, input type=button, input type=checkbox, input type=file, input type=image, input type=password, input type=radio, input type=reset, input type=submit, input type=text, li, object, ol, p, rt, ruby, s, span, sub, table, tbody, td, tfoot, th, thead, tr, tt, u, ul, var, xmp

Send feedback about this topic to Microsoft. © 2011 Microsoft Corporation. All rights reserved.

Community Additions

ADD
Show:
© 2014 Microsoft