CSS Cursors Example

First Page
<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        .alias {
            cursor: alias;
        }

        .all-scroll {
            cursor: all-scroll;
        }

        .auto {
            cursor: auto;
        }

        .cell {
            cursor: cell;
        }

        .context-menu {
            cursor: context-menu;
        }

        .col-resize {
            cursor: col-resize;
        }

        .copy {
            cursor: copy;
        }

        .crosshair {
            cursor: crosshair;
        }

        .default {
            cursor: default;
        }

        .e-resize {
            cursor: e-resize;
        }

        .ew-resize {
            cursor: ew-resize;
        }

        .grab {
            cursor: -webkit-grab;
            cursor: grab;
        }

        .grabbing {
            cursor: -webkit-grabbing;
            cursor: grabbing;
        }

        .help {
            cursor: help;
        }

        .move {
            cursor: move;
        }

        .n-resize {
            cursor: n-resize;
        }

        .ne-resize {
            cursor: ne-resize;
        }

        .nesw-resize {
            cursor: nesw-resize;
        }

        .ns-resize {
            cursor: ns-resize;
        }

        .nw-resize {
            cursor: nw-resize;
        }

        .nwse-resize {
            cursor: nwse-resize;
        }

        .no-drop {
            cursor: no-drop;
        }

        .none {
            cursor: none;
        }

        .not-allowed {
            cursor: not-allowed;
        }

        .pointer {
            cursor: pointer;
        }

        .progress {
            cursor: progress;
        }

        .row-resize {
            cursor: row-resize;
        }

        .s-resize {
            cursor: s-resize;
        }

        .se-resize {
            cursor: se-resize;
        }

        .sw-resize {
            cursor: sw-resize;
        }

        .text {
            cursor: text;
        }

        .url {
            cursor: url(myBall.cur), auto;
        }

        .w-resize {
            cursor: w-resize;
        }

        .wait {
            cursor: wait;
        }

        .zoom-in {
            cursor: zoom-in;
        }

        .zoom-out {
            cursor: zoom-out;
        }
    </style>
    <title></title>
</head>
<body>
    <h1>The cursor Property</h1>
    <p>Mouse over the words to change the mouse cursor.</p>
    <p class="alias">alias</p>
    <p class="all-scroll">all-scroll</p>
    <p class="auto">auto</p>
    <p class="cell">cell</p>
    <p class="context-menu">context-menu</p>
    <p class="col-resize">col-resize</p>
    <p class="copy">copy</p>
    <p class="crosshair">crosshair</p>
    <p class="default">default</p>
    <p class="e-resize">e-resize</p>
    <p class="ew-resize">ew-resize</p>
    <p class="grab">grab</p>
    <p class="grabbing">grabbing</p>
    <p class="help">help</p>
    <p class="move">move</p>
    <p class="n-resize">n-resize</p>
    <p class="ne-resize">ne-resize</p>
    <p class="nesw-resize">nesw-resize</p>
    <p class="ns-resize">ns-resize</p>
    <p class="nw-resize">nw-resize</p>
    <p class="nwse-resize">nwse-resize</p>
    <p class="no-drop">no-drop</p>
    <p class="none">none</p>
    <p class="not-allowed">not-allowed</p>
    <p class="pointer">pointer</p>
    <p class="progress">progress</p>
    <p class="row-resize">row-resize</p>
    <p class="s-resize">s-resize</p>
    <p class="se-resize">se-resize</p>
    <p class="sw-resize">sw-resize</p>
    <p class="text">text</p>
    <p class="url">url</p>
    <p class="w-resize">w-resize</p>
    <p class="wait">wait</p>
    <p class="zoom-in">zoom-in</p>
    <p class="zoom-out">zoom-out</p>
</body>
</html>
Output

First Page