In order to access this site you need to enable JavaScript!

You are here: Reference > JavaScript > client-side > style handling > properties > cursor

cursor style property

Browser support:

Specifies or returns the type of cursor to display for the pointing device (mouse).

Internet Explorer from version 6 supports custom cursors stored in .cur or .ani file types.

Syntax:

object.cursor;

You can find the related objects in the Supported by objects section below.

This property is read/write.

CSS page for this property: cursor

Possible values:

The type of this property is string.

One of the following values:

alias

Arrow with a small curved arrow next to it.

all-scroll

Crossed arrows with a dot in the middle, indicating that the page can be scrolled in any direction.

auto

Default. Browser default cursor.

cell

A thick plus-sign.

col-resize

Arrows pointing left and right with a vertical line separating them.

context-menu

	3.6

Platform-dependent default context menu cursor. Supported by Firefox from version 3.6.

copy

An arrow with a small plus sign at its top-right corner.

crosshair

Simple cross hair.

default

Platform-dependent default cursor.

e-resize

East arrows, indicating that the element is resizable.

hand

Normal hand. Internet Explorer only, use pointer instead.

help

Arrow with question mark, indicating that help is available.

move

Crossed arrows, indicating that something is to be moved.

n-resize

North arrows, indicating that the element is resizable.

ne-resize

North-east arrows, indicating that the element is resizable.

no-drop

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

not-allowed

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

nw-resize

North-west arrows, indicating that the element is resizable.

pointer

Normal hand.

progress

Hourglass, indicating that a process is running.

row-resize

Arrows pointing up and down with a horizontal line separating them.

s-resize

South arrows, indicating that the element is resizable.

se-resize

South-east arrows, indicating that the element is resizable.

sw-resize

South-west arrows, indicating that the element is resizable.

text

Editable text, rendered as an I-beam.

vertical-text

Editable vertical text, rendered as a horizontal I-beam.

w-resize

West arrows, indicating that the element is resizable.

wait

Hourglass or watch, indicating that the program is busy.

URI

URL of a cursor file.

inherit

Takes the value of this property from the computed style of the parent element.

-moz-alias

Deprecated. Use alias instead. Arrow with a small curved arrow next to it.

-moz-cell

Deprecated. Use cell instead. A thick plus-sign.

-moz-copy

Deprecated. Use copy instead. An arrow with a small plus sign at its top-right corner.

-moz-grab

Normal hand.

-moz-grabbing

Normal hand with its 5 fingers contracted.

-moz-spinning

Deprecated. Use progress instead. Hourglass, indicating that the program is busy.

-moz-zoom-in

A magnifying glass with a plus-sign at its centre.

-moz-zoom-out

A magnifying glass with a minus-sign at its centre.

-webkit-zoom-in

A magnifying glass with a plus-sign at its centre.

-webkit-zoom-out

A magnifying glass with a minus-sign at its centre.

Default: auto

Example HTML code 1:

This example illustrates the use of the cursor property:

<head>
    <style>
        .example {
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="example">Move the mouse over this text!</div>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example illustrates the use of the cursor property in JavaScript:

<head>
    <script type="text/javascript">
        function ChangeCursor (selectTag) {
            // Returns the index of the selected option
            var whichSelected = selectTag.selectedIndex;

            // Returns the text of the selected option
            var selectState = selectTag.options[whichSelected].text;

            document.body.style.cursor = selectState;
        }
    </script>
</head>
<body>
    Change the type of the cursor and move the cursor over the body
    <select onchange="ChangeCursor (this);" size="17">
        <option />all-scroll
        <option />col-resize
        <option />crosshair
        <option />help
        <option />move
        <option />no-drop
        <option />not-allowed
        <option />pointer
        <option />progress
        <option />row-resize
        <option />text
        <option />vertical-text
        <option />wait
        <option />n-resize
        <option />ne-resize
        <option />nw-resize
        <option />e-resize
    </select>
</body>