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>
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>
Did you find this example helpful? yes no

Supported by objects:

External links:

User Contributed Comments

Post Content

Post Content