cursor

Description
Syntax
Examples
Links

Description

The cursor property for CSS specifies the type of cursor to display for the pointing device when the cursor's hotspot is within the element's border edge.

Syntax

CSS

cursor: value;

JS

object.style.cursor = "value";

Values

<'cursor'> = [ [<url> [<x> <y>]?,]* [ auto | default | none | context-menu | help | pointer | progress | wait | cell | crosshair | text | vertical-text | alias | copy | move | no-drop | not-allowed | grab | grabbing | e-resize | n-resize | ne-resize | nw-resize | s-resize | se-resize | sw-resize | w-resize | ew-resize | ns-resize | nesw-resize | nwse-resize | col-resize | row-resize | all-scroll | zoom-in | zoom-out ] ]

<url> = url( <string> <url-modifier>* )

<string>

Specifies a sequence of characters delimited by double quotes (") or single quotes (').

<url-modifier>

Changes the meaning or the interpretation of the URL.

<x>

The x coordinate.

<y>

The y coordinate.

auto

Automatically specified by the user agent.

default

The platform-dependent default cursor.

none

No cursor is rendered.

context-menu

A context menu is available for the object under the cursor.

help

Help is available for the object under the cursor.

pointer

A pointer that indicates a link.

progress

A progress indicator.

wait

Indicates that the program is busy and the user should wait.

cell

Indicates that a cell or set of cells may be selected.

crosshair

A simple crosshair.

text

Indicates text that may be selected.

vertical-text

Indicates vertical-text that may be selected.

alias

Indicates an alias of/shortcut to something is to be created.

copy

Indicates something is to be copied.

move

Indicates something is to be moved.

no-drop

Indicates that the dragged item cannot be dropped at the current cursor location.

not-allowed

Indicates that the requested action will not be carried out.

grab

Indicates that something can be grabbed.

grabbing

Indicates that something is being grabbed.

e-resize

Indicates that the edge is to be moved east.

n-resize

Indicates that the edge is to be moved north.

ne-resize

Indicates that the edge is to be moved north-east.

nw-resize

Indicates that the edge is to be moved north-west.

s-resize

Indicates that the edge is to be moved south.

se-resize

Indicates that the edge is to be moved south-east.

sw-resize

Indicates that the edge is to be moved south-west.

w-resize

Indicates that the edge is to be moved west.

ew-resize

Indicates that the edge is to be moved east-west.

ns-resize

Indicates that the edge is to be moved north-south.

nesw-resize

Indicates that the edge is to be moved north-east-south-west.

nwse-resize

Indicates that the edge is to be moved north-west-south-east.

col-resize

Indicates that the item/column can be resized horizontally.

row-resize

Indicates that the item/row can be resized vertically.

all-scroll

Indicates that the something can be scrolled in any direction.

zoom-in

Indicates that something can be zoomed in.

zoom-out

Indicates that something can be zoomed out.

Initial

auto

<!doctype html>
<html>
<body>
    <button>initial</button>
    <button>alias</button>
    <button>all-scroll</button>
    <button>auto</button>
    <button>cell</button>
    <button>col-resize</button>
    <button>context-menu</button>
    <button>copy</button>
    <button>crosshair</button>
    <button>default</button>
    <button>e-resize</button>
    <button>ew-resize</button>
    <button>grab</button>
    <button>grabbing</button>
    <button>help</button>
    <button>move</button>
    <button>n-resize</button>
    <button>ne-resize</button>
    <button>nesw-resize</button>
    <button>no-drop</button>
    <button>none</button>
    <button>not-allowed</button>
    <button>ns-resize</button>
    <button>nw-resize</button>
    <button>nwse-resize</button>
    <button>pointer</button>
    <button>progress</button>
    <button>row-resize</button>
    <button>s-resize</button>
    <button>se-resize</button>
    <button>sw-resize</button>
    <button>text</button>
    <button value="url(/assets/svg/Happy100.svg), auto">url</button>
    <button>vertical-text</button>
    <button>w-resize</button>
    <button>wait</button>
    <button value="url(/assets/svg/Happy100.svg) 100 100, auto">x y</button>
    <button>zoom-in</button>
    <button>zoom-out</button>
    <p>cursor</p>
    <script>
        function myfunction(myparameter)
        {
            const mytarget = myparameter.target;
            const myproperty = mytarget.value || mytarget.innerHTML;
            for(const myelement of document.querySelectorAll("button, html"))
            {
                myelement.style.cursor = myproperty;
            }
        }
        for(const mybutton of document.querySelectorAll("button"))
        {
            mybutton.addEventListener("mouseover", myfunction);
        }
    </script>
</body>
</html>