Cursor Property

The cursor CSS property specifies the mouse cursor displayed when the mouse pointer is over an element.

Values

A url(…) or a comma separated list url(…), url(…), …, pointing to an image file. More than one may be provided as fallback, in case some cursor image types are not supported. A non-URL fallback (one ore more of the other values) must be at the end of the fallback list. See Using URL values for the cursor property for more details.

Category:General

CSS value Description
auto The browser determines the cursor to display based on the current context. E.g. equivalent to text when hovering text.
default Default cursor, typically an arrow.
none No cursor is rendered

Category:Links & status

CSS value Description
context-menu A context menu is available under the cursor. In Gecko/Firefox not implemented on Windows, bug 258960 WONTFIX.
help Indicating help is available.
pointer E.g. used when hovering over links, typically a hand.
progress The program is busy in the background but the user can still interact with the interface (unlike for wait).
wait The program is busy (sometimes an hourglass or a watch).

Category:Selection

CSS value Description
cell Indicating that cells can be selected.
crosshair Cross cursor, often used to indicate selection in a bitmap.
text Indicating text can be selected, typically an I-beam.
vertical-text Indicating that vertical text can be selected, typically a sideways I-beam.

Category:Drag and drop

CSS value Description
alias Indicating an alias or shortcut is to be created.
copy Indicating that something can be copied.
move The hovered object may be moved.
no-drop Cursor showing that a drop is not allowed at the current location. bug 275173on Windows, “no-drop is the same as not-allowed”.
not-allowed Cursor showing that something cannot be done.

Category:Resize & scrolling

CSS value Description
all-scroll Cursor showing that something can be scrolled in any direction (panned). bug 275174 on Windows, “all-scroll is the same as move“.
col-resize The item/column can be resized horizontally. Often rendered as arrows pointing left and right with a vertical bar separating.
row-resize The item/row can be resized vertically. Often rendered 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 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.
s-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.
w-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.
ne-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.
nw-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.
se-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.
sw-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.
ew-resize Indicates a bidirectional resize cursor.
ns-resize Indicates a bidirectional resize cursor.
nesw-resize Indicates a bidirectional resize cursor.
nwse-resize Indicates a bidirectional resize cursor.

Category:Zoom

CSS value Description
zoom-in Indicates that something can be zoomed (magnified) in or out. Experimental
zoom-out Indicates that something can be zoomed (magnified) in or out. Experimental

Example

<!DOCTYPE html>
<html>
    <head>
        <style>
            .foo {
                cursor: crosshair;
            }
            
            /* use prefixed-value if "zoom-in" isn't supported */ 
			.bar {
                cursor: -webkit-zoom-in;
                cursor: -moz-zoom-in;
                cursor: zoom-in;
            }
            
            /* standard cursor value as fallback for url() must be provided 
             * (doesn't work without) */ 
			 .baz {
                cursor: url(hyper.cur), auto
            }
        </style>
    </head>
    <body>
        <p class="foo">
            Hello Cursor Styles CSS property
        </p>
         <p class="bar">
            Hello Cursor Styles CSS property
        </p>
         <p class="baz">
            Hello Cursor Styles CSS property
        </p>

    </body>
</html>