yustier/The Cursors of CSS.html

## The Cursors of CSS.html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>The Cursors of CSS</title>
    <style>
        .auto            { cursor: auto; }
        .default         { cursor: default; }
        .none            { cursor: none; }
        .context-menu    { cursor: context-menu; }
        .help            { cursor: help; }
        .pointer         { cursor: pointer; }
        .progress        { cursor: progress; }
        .wait            { cursor: wait; }
        .cell            { cursor: cell; }
        .crosshair       { cursor: crosshair; }
        .text            { cursor: text; }
        .vertical-text   { cursor: vertical-text; }
        .alias           { cursor: alias; }
        .copy            { cursor: copy; }
        .move            { cursor: move; }
        .no-drop         { cursor: no-drop; }
        .not-allowed     { cursor: not-allowed; }
        .grab            { cursor: grab; }
        .grabbing        { cursor: grabbing; }
        .all-scroll      { cursor: all-scroll; }
        .col-resize      { cursor: col-resize; }
        .row-resize      { cursor: row-resize; }
        .n-resize        { cursor: n-resize; }
        .e-resize        { cursor: e-resize; }
        .s-resize        { cursor: s-resize; }
        .w-resize        { cursor: w-resize; }
        .ne-resize       { cursor: ne-resize; }
        .nw-resize       { cursor: nw-resize; }
        .se-resize       { cursor: se-resize; }
        .sw-resize       { cursor: sw-resize; }
        .ew-resize       { cursor: ew-resize; }
        .ns-resize       { cursor: ns-resize; }
        .nesw-resize     { cursor: nesw-resize; }
        .nwse-resize     { cursor: nwse-resize; }
        .zoom-in         { cursor: zoom-in; }
        .zoom-out        { cursor: zoom-out; }

        body {
            text-align: center;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

        }

        .cursors {
            display: inline-flex;
            flex-wrap: wrap;
            width: calc(100% - 300px);
            margin-bottom: 50px;
        }

        .cursors>h2 {
            flex: 100%;
            text-align: center;
            margin: 20px 0 10px;
        }

        .cursors>div {
            flex: 150px;
            padding: 10px 2px;
            white-space: nowrap;
            border: 1px solid #eee;
            border-radius: 5px;
            margin: 0 5px 5px 0;
            position: relative;
            display: inline-block;
        }

        .cursors>div:hover {
            background: #eee;
        }

        .description {
            display: none;
            text-align: left;
            position: absolute;
            padding: 5px;
            color: #000;
            background: #ff8;
            max-width: max(300px, calc(100% - 10px));
            width: max-content;
            white-space: normal;
        }

        .cursors>div:hover .description {
            display: inline-block;
            z-index: 1;
            top: 45px;
            left: 0;
            right: auto;
        }
    </style>
</head>

<body>
    <h1>The Cursors of CSS</h1>

    <p>Source: <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/cursor">cursor - CSS: Cascading Style Sheets | MDN</a></p>

    <div class="cursors">
        <h2>General</h2>
        <div class="auto">auto
            <div class="description">The UA will determine the cursor to display based on the current context. E.g., equivalent to <code>text</code> when hovering text.</div>
        </div>
        <div class="default">default
            <div class="description">The platform-dependent default cursor. Typically an arrow.</div>
        </div>
        <div class="none">none
            <div class="description">No cursor is rendered.</div>
        </div>
        <h2>Links & status</h2>
        <div class="context-menu">context-menu
            <div class="description">A context menu is available.</div>
        </div>
        <div class="help">help
            <div class="description">Help information is available.</div>
        </div>
        <div class="pointer">pointer
            <div class="description">The cursor is a pointer that indicates a link. Typically an image of a pointing hand.</div>
        </div>
        <div class="progress">progress
            <div class="description">The program is busy in the background, but the user can still interact with the interface (in contrast to <code>wait</code>).</div>
        </div>
        <div class="wait">wait
            <div class="description">The program is busy, and the user can't interact with the interface (in contrast to <code>progress</code>). Sometimes an image of an hourglass or a watch.</div>
        </div>
        <h2>Selection</h2>
        <div class="cell">cell
            <div class="description">The table cell or set of cells can be selected.</div>
        </div>
        <div class="crosshair">crosshair
            <div class="description">Cross cursor, often used to indicate selection in a bitmap.</div>
        </div>
        <div class="text">text
            <div class="description">The text can be selected. Typically the shape of an I-beam.</div>
        </div>
        <div class="vertical-text">vertical-text
            <div class="description">The vertical text can be selected. Typically the shape of a sideways I-beam.</div>
        </div>
        <h2>Drag & drop</h2>
        <div class="alias">alias
            <div class="description">An alias or shortcut is to be created.</div>
        </div>
        <div class="copy">copy
            <div class="description">Something is to be copied.</div>
        </div>
        <div class="move">move
            <div class="description">Something is to be moved.</div>
        </div>
        <div class="no-drop">no-drop
            <div class="description">An item may not be dropped at the current location.<br><a href="https://bugzil.la/275173">Firefox bug 275173</a>: On Windows and macOS, <code>no-drop</code> is the same as <code>not-allowed</code>.</div>
        </div>
        <div class="not-allowed">not-allowed
            <div class="description">The requested action will not be carried out.</div>
        </div>
        <div class="grab">grab
            <div class="description">Something can be grabbed (dragged to be moved).</div>
        </div>
        <div class="grabbing">grabbing
            <div class="description">Something is being grabbed (dragged to be moved).</div>
        </div>
        <h2>Resizing & scrolling</h2>
        <div class="all-scroll">all-scroll
            <div class="description">Something can be scrolled in any direction (panned).<br><a href="https://bugzil.la/275174">Firefox bug 275174</a>: On Windows, <code>all-scroll</code> is the same as <code>move</code>.</div>
        </div>
        <div class="col-resize">col-resize
            <div class="description">The item/column can be resized horizontally. Often rendered as arrows pointing left and right with a vertical bar separating them.</div>
        </div>
        <div class="row-resize">row-resize
            <div class="description">The item/row can be resized vertically. Often rendered as arrows pointing up and down with a horizontal bar separating them.</div>
        </div>
        <div class="n-resize">n-resize
            <div class="description">Some edge is to be moved. For example, the <code>se-resize</code> cursor is used when the movement starts from the <em>south-east</em> corner of the box.<br>In some environments, an equivalent bidirectional resize cursor is shown. For example, <code>n-resize</code> and <code>s-resize</code> are the same as <code>ns-resize</code>.</div>
        </div>
        <div class="e-resize">e-resize
            <div class="description">Some edge is to be moved. For example, the <code>se-resize</code> cursor is used when the movement starts from the <em>south-east</em> corner of the box.<br>In some environments, an equivalent bidirectional resize cursor is shown. For example, <code>n-resize</code> and <code>s-resize</code> are the same as <code>ns-resize</code>.</div>
        </div>
        <div class="s-resize">s-resize
            <div class="description">Some edge is to be moved. For example, the <code>se-resize</code> cursor is used when the movement starts from the <em>south-east</em> corner of the box.<br>In some environments, an equivalent bidirectional resize cursor is shown. For example, <code>n-resize</code> and <code>s-resize</code> are the same as <code>ns-resize</code>.</div>
        </div>
        <div class="w-resize">w-resize
            <div class="description">Some edge is to be moved. For example, the <code>se-resize</code> cursor is used when the movement starts from the <em>south-east</em> corner of the box.<br>In some environments, an equivalent bidirectional resize cursor is shown. For example, <code>n-resize</code> and <code>s-resize</code> are the same as <code>ns-resize</code>.</div>
        </div>
        <div class="ne-resize">ne-resize
            <div class="description">Some edge is to be moved. For example, the <code>se-resize</code> cursor is used when the movement starts from the <em>south-east</em> corner of the box.<br>In some environments, an equivalent bidirectional resize cursor is shown. For example, <code>n-resize</code> and <code>s-resize</code> are the same as <code>ns-resize</code>.</div>
        </div>
        <div class="nw-resize">nw-resize
            <div class="description">Some edge is to be moved. For example, the <code>se-resize</code> cursor is used when the movement starts from the <em>south-east</em> corner of the box.<br>In some environments, an equivalent bidirectional resize cursor is shown. For example, <code>n-resize</code> and <code>s-resize</code> are the same as <code>ns-resize</code>.</div>
        </div>
        <div class="se-resize">se-resize
            <div class="description">Some edge is to be moved. For example, the <code>se-resize</code> cursor is used when the movement starts from the <em>south-east</em> corner of the box.<br>In some environments, an equivalent bidirectional resize cursor is shown. For example, <code>n-resize</code> and <code>s-resize</code> are the same as <code>ns-resize</code>.</div>
        </div>
        <div class="sw-resize">sw-resize
            <div class="description">Some edge is to be moved. For example, the <code>se-resize</code> cursor is used when the movement starts from the <em>south-east</em> corner of the box.<br>In some environments, an equivalent bidirectional resize cursor is shown. For example, <code>n-resize</code> and <code>s-resize</code> are the same as <code>ns-resize</code>.</div>
        </div>
        <div class="ew-resize">ew-resize
            <div class="description">Bidirectional resize cursor.</div>
        </div>
        <div class="ns-resize">ns-resize
            <div class="description">Bidirectional resize cursor.</div>
        </div>
        <div class="nesw-resize">nesw-resize
            <div class="description">Bidirectional resize cursor.</div>
        </div>
        <div class="nwse-resize">nwse-resize
            <div class="description">Bidirectional resize cursor.</div>
        </div>
        <h2>Zooming</h2>
        <div class="zoom-in">zoom-in
            <div class="description">Something can be zoomed (magnified) in or out.</div>
        </div>
        <div class="zoom-out">zoom-out
            <div class="description">Something can be zoomed (magnified) in or out.</div>
        </div>
    </div>
    <table class="standard-table" style="text-align: justify; display: none;">
        <thead>
            <tr>
                <th scope="col">Category</th>
                <th scope="col">Keyword</th>
                <th scope="col">Description</th>
            </tr>
        </thead>
        <tbody>
            <tr style="cursor: auto">
                <th rowspan="3" scope="row">General</th>
                <td><code>auto</code></td>
                <td>
                    The UA will determine the cursor to display based on the current context. E.g., equivalent to
                    <code>text</code>
                    when hovering text.
                </td>
            </tr>
            <tr style="cursor: default">
                <td><code>default</code></td>
                <td>The platform-dependent default cursor. Typically an arrow.</td>
            </tr>
            <tr style="cursor: none">
                <td><code>none</code></td>
                <td>No cursor is rendered.</td>
            </tr>
            <tr style="cursor: context-menu">
                <th rowspan="5" scope="row" style="cursor: auto">Links &amp; status</th>
                <td><code>context-menu</code></td>
                <td>A context menu is available.</td>
            </tr>
            <tr style="cursor: help">
                <td><code>help</code></td>
                <td>Help information is available.</td>
            </tr>
            <tr style="cursor: pointer">
                <td><code>pointer</code></td>
                <td>
                    The cursor is a pointer that indicates a link. Typically an image of a pointing hand.
                </td>
            </tr>
            <tr style="cursor: progress">
                <td><code>progress</code></td>
                <td>
                    The program is busy in the background, but the user can still interact
                    with the interface (in contrast to <code>wait</code>).
                </td>
            </tr>
            <tr style="cursor: wait">
                <td><code>wait</code></td>
                <td>
                    The program is busy, and the user can't interact with the interface (in contrast to
                    <code>progress</code>).
                    Sometimes an image of an hourglass or a watch.
                </td>
            </tr>
            <tr style="cursor: cell">
                <th rowspan="4" scope="row" style="cursor: auto">Selection</th>
                <td><code>cell</code></td>
                <td>The table cell or set of cells can be selected.</td>
            </tr>
            <tr style="cursor: crosshair">
                <td><code>crosshair</code></td>
                <td>Cross cursor, often used to indicate selection in a bitmap.</td>
            </tr>
            <tr style="cursor: text">
                <td><code>text</code></td>
                <td>The text can be selected. Typically the shape of an I-beam.</td>
            </tr>
            <tr style="cursor: vertical-text">
                <td><code>vertical-text</code></td>
                <td>
                    The vertical text can be selected. Typically the shape of a sideways I-beam.
                </td>
            </tr>
            <tr style="cursor: alias">
                <th rowspan="7" scope="row" style="cursor: auto">Drag &amp; drop</th>
                <td><code>alias</code></td>
                <td>An alias or shortcut is to be created.</td>
            </tr>
            <tr style="cursor: copy">
                <td><code>copy</code></td>
                <td>Something is to be copied.</td>
            </tr>
            <tr style="cursor: move">
                <td><code>move</code></td>
                <td>Something is to be moved.</td>
            </tr>
            <tr style="cursor: no-drop">
                <td><code>no-drop</code></td>
                <td>
                    An item may not be dropped at the current location.<br>[Firefox bug 275173](https://bugzil.la/275173):
                    On Windows and macOS, <code>no-drop</code> is the same as <code>not-allowed</code>.
                </td>
            </tr>
            <tr style="cursor: not-allowed">
                <td><code>not-allowed</code></td>
                <td>The requested action will not be carried out.</td>
            </tr>
            <tr style="cursor: grab">
                <td><code>grab</code></td>
                <td>Something can be grabbed (dragged to be moved).</td>
            </tr>
            <tr style="cursor: grabbing">
                <td><code>grabbing</code></td>
                <td>Something is being grabbed (dragged to be moved).</td>
            </tr>
            <tr style="cursor: all-scroll">
                <th rowspan="15" scope="row" style="cursor: auto">
                    Resizing &amp; scrolling
                </th>
                <td><code>all-scroll</code></td>
                <td>
                    Something can be scrolled in any direction (panned).<br>[Firefox bug
                    275174](https://bugzil.la/275174):
                    On Windows, <code>all-scroll</code> is the same as <code>move</code>.
                </td>
            </tr>
            <tr style="cursor: col-resize">
                <td><code>col-resize</code></td>
                <td>
                    The item/column can be resized horizontally.
                    Often rendered as arrows pointing left and right with a vertical bar separating them.
                </td>
            </tr>
            <tr style="cursor: row-resize">
                <td><code>row-resize</code></td>
                <td>
                    The item/row can be resized vertically.
                    Often rendered as arrows pointing up and down with a horizontal bar separating them.
                </td>
            </tr>
            <tr style="cursor: n-resize">
                <td><code>n-resize</code></td>
                <td rowspan="8" style="cursor: auto">
                    Some edge is to be moved. For example, the <code>se-resize</code> cursor is used when the movement
                    starts from
                    the <em>south-east</em> corner of the box.<br>
                    In some environments, an equivalent bidirectional resize cursor is shown.
                    For example, <code>n-resize</code> and <code>s-resize</code> are the same as <code>ns-resize</code>.
                </td>
            </tr>
            <tr style="cursor: e-resize">
                <td><code>e-resize</code></td>
            </tr>
            <tr style="cursor: s-resize">
                <td><code>s-resize</code></td>
            </tr>
            <tr style="cursor: w-resize">
                <td><code>w-resize</code></td>
            </tr>
            <tr style="cursor: ne-resize">
                <td><code>ne-resize</code></td>
            </tr>
            <tr style="cursor: nw-resize">
                <td><code>nw-resize</code></td>
            </tr>
            <tr style="cursor: se-resize">
                <td><code>se-resize</code></td>
            </tr>
            <tr style="cursor: sw-resize">
                <td><code>sw-resize</code></td>
            </tr>
            <tr style="cursor: ew-resize">
                <td><code>ew-resize</code></td>
                <td rowspan="4" style="cursor: auto">Bidirectional resize cursor.</td>
            </tr>
            <tr style="cursor: ns-resize">
                <td><code>ns-resize</code></td>
            </tr>
            <tr style="cursor: nesw-resize">
                <td><code>nesw-resize</code></td>
            </tr>
            <tr style="cursor: nwse-resize">
                <td><code>nwse-resize</code></td>
            </tr>
            <tr style="cursor: zoom-in">
                <th rowspan="2" scope="row" style="cursor: auto">Zooming</th>
                <td><code>zoom-in</code></td>
                <td rowspan="2" style="cursor: auto">
                    <p>Something can be zoomed (magnified) in or out.</p>
                </td>
            </tr>
            <tr style="cursor: zoom-out">
                <td><code>zoom-out</code></td>
            </tr>
        </tbody>
    </table>
</body>

</html>
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>The Cursors of CSS</title>
	<style>
	.auto { cursor: auto; }
	.default { cursor: default; }
	.none { cursor: none; }
	.context-menu { cursor: context-menu; }
	.help { cursor: help; }
	.pointer { cursor: pointer; }
	.progress { cursor: progress; }
	.wait { cursor: wait; }
	.cell { cursor: cell; }
	.crosshair { cursor: crosshair; }
	.text { cursor: text; }
	.vertical-text { cursor: vertical-text; }
	.alias { cursor: alias; }
	.copy { cursor: copy; }
	.move { cursor: move; }
	.no-drop { cursor: no-drop; }
	.not-allowed { cursor: not-allowed; }
	.grab { cursor: grab; }
	.grabbing { cursor: grabbing; }
	.all-scroll { cursor: all-scroll; }
	.col-resize { cursor: col-resize; }
	.row-resize { cursor: row-resize; }
	.n-resize { cursor: n-resize; }
	.e-resize { cursor: e-resize; }
	.s-resize { cursor: s-resize; }
	.w-resize { cursor: w-resize; }
	.ne-resize { cursor: ne-resize; }
	.nw-resize { cursor: nw-resize; }
	.se-resize { cursor: se-resize; }
	.sw-resize { cursor: sw-resize; }
	.ew-resize { cursor: ew-resize; }
	.ns-resize { cursor: ns-resize; }
	.nesw-resize { cursor: nesw-resize; }
	.nwse-resize { cursor: nwse-resize; }
	.zoom-in { cursor: zoom-in; }
	.zoom-out { cursor: zoom-out; }

	body {
	text-align: center;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

	}

	.cursors {
	display: inline-flex;
	flex-wrap: wrap;
	width: calc(100% - 300px);
	margin-bottom: 50px;
	}

	.cursors>h2 {
	flex: 100%;
	text-align: center;
	margin: 20px 0 10px;
	}

	.cursors>div {
	flex: 150px;
	padding: 10px 2px;
	white-space: nowrap;
	border: 1px solid #eee;
	border-radius: 5px;
	margin: 0 5px 5px 0;
	position: relative;
	display: inline-block;
	}

	.cursors>div:hover {
	background: #eee;
	}

	.description {
	display: none;
	text-align: left;
	position: absolute;
	padding: 5px;
	color: #000;
	background: #ff8;
	max-width: max(300px, calc(100% - 10px));
	width: max-content;
	white-space: normal;
	}

	.cursors>div:hover .description {
	display: inline-block;
	z-index: 1;
	top: 45px;
	left: 0;
	right: auto;
	}
	</style>
	</head>

	<body>
	<h1>The Cursors of CSS</h1>

	<p>Source: <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/cursor">cursor - CSS: Cascading Style Sheets \| MDN</a></p>

	<div class="cursors">
	<h2>General</h2>
	<div class="auto">auto
	<div class="description">The UA will determine the cursor to display based on the current context. E.g., equivalent to <code>text</code> when hovering text.</div>
	</div>
	<div class="default">default
	<div class="description">The platform-dependent default cursor. Typically an arrow.</div>
	</div>
	<div class="none">none
	<div class="description">No cursor is rendered.</div>
	</div>
	<h2>Links & status</h2>
	<div class="context-menu">context-menu
	<div class="description">A context menu is available.</div>
	</div>
	<div class="help">help
	<div class="description">Help information is available.</div>
	</div>
	<div class="pointer">pointer
	<div class="description">The cursor is a pointer that indicates a link. Typically an image of a pointing hand.</div>
	</div>
	<div class="progress">progress
	<div class="description">The program is busy in the background, but the user can still interact with the interface (in contrast to <code>wait</code>).</div>
	</div>
	<div class="wait">wait
	<div class="description">The program is busy, and the user can't interact with the interface (in contrast to <code>progress</code>). Sometimes an image of an hourglass or a watch.</div>
	</div>
	<h2>Selection</h2>
	<div class="cell">cell
	<div class="description">The table cell or set of cells can be selected.</div>
	</div>
	<div class="crosshair">crosshair
	<div class="description">Cross cursor, often used to indicate selection in a bitmap.</div>
	</div>
	<div class="text">text
	<div class="description">The text can be selected. Typically the shape of an I-beam.</div>
	</div>
	<div class="vertical-text">vertical-text
	<div class="description">The vertical text can be selected. Typically the shape of a sideways I-beam.</div>
	</div>
	<h2>Drag & drop</h2>
	<div class="alias">alias
	<div class="description">An alias or shortcut is to be created.</div>
	</div>
	<div class="copy">copy
	<div class="description">Something is to be copied.</div>
	</div>
	<div class="move">move
	<div class="description">Something is to be moved.</div>
	</div>
	<div class="no-drop">no-drop
	<div class="description">An item may not be dropped at the current location.<br><a href="https://bugzil.la/275173">Firefox bug 275173</a>: On Windows and macOS, <code>no-drop</code> is the same as <code>not-allowed</code>.</div>
	</div>
	<div class="not-allowed">not-allowed
	<div class="description">The requested action will not be carried out.</div>
	</div>
	<div class="grab">grab
	<div class="description">Something can be grabbed (dragged to be moved).</div>
	</div>
	<div class="grabbing">grabbing
	<div class="description">Something is being grabbed (dragged to be moved).</div>
	</div>
	<h2>Resizing & scrolling</h2>
	<div class="all-scroll">all-scroll
	<div class="description">Something can be scrolled in any direction (panned).<br><a href="https://bugzil.la/275174">Firefox bug 275174</a>: On Windows, <code>all-scroll</code> is the same as <code>move</code>.</div>
	</div>
	<div class="col-resize">col-resize
	<div class="description">The item/column can be resized horizontally. Often rendered as arrows pointing left and right with a vertical bar separating them.</div>
	</div>
	<div class="row-resize">row-resize
	<div class="description">The item/row can be resized vertically. Often rendered as arrows pointing up and down with a horizontal bar separating them.</div>
	</div>
	<div class="n-resize">n-resize
	<div class="description">Some edge is to be moved. For example, the <code>se-resize</code> cursor is used when the movement starts from the <em>south-east</em> corner of the box.<br>In some environments, an equivalent bidirectional resize cursor is shown. For example, <code>n-resize</code> and <code>s-resize</code> are the same as <code>ns-resize</code>.</div>
	</div>
	<div class="e-resize">e-resize
	<div class="description">Some edge is to be moved. For example, the <code>se-resize</code> cursor is used when the movement starts from the <em>south-east</em> corner of the box.<br>In some environments, an equivalent bidirectional resize cursor is shown. For example, <code>n-resize</code> and <code>s-resize</code> are the same as <code>ns-resize</code>.</div>
	</div>
	<div class="s-resize">s-resize
	<div class="description">Some edge is to be moved. For example, the <code>se-resize</code> cursor is used when the movement starts from the <em>south-east</em> corner of the box.<br>In some environments, an equivalent bidirectional resize cursor is shown. For example, <code>n-resize</code> and <code>s-resize</code> are the same as <code>ns-resize</code>.</div>
	</div>
	<div class="w-resize">w-resize
	<div class="description">Some edge is to be moved. For example, the <code>se-resize</code> cursor is used when the movement starts from the <em>south-east</em> corner of the box.<br>In some environments, an equivalent bidirectional resize cursor is shown. For example, <code>n-resize</code> and <code>s-resize</code> are the same as <code>ns-resize</code>.</div>
	</div>
	<div class="ne-resize">ne-resize
	<div class="description">Some edge is to be moved. For example, the <code>se-resize</code> cursor is used when the movement starts from the <em>south-east</em> corner of the box.<br>In some environments, an equivalent bidirectional resize cursor is shown. For example, <code>n-resize</code> and <code>s-resize</code> are the same as <code>ns-resize</code>.</div>
	</div>
	<div class="nw-resize">nw-resize
	<div class="description">Some edge is to be moved. For example, the <code>se-resize</code> cursor is used when the movement starts from the <em>south-east</em> corner of the box.<br>In some environments, an equivalent bidirectional resize cursor is shown. For example, <code>n-resize</code> and <code>s-resize</code> are the same as <code>ns-resize</code>.</div>
	</div>
	<div class="se-resize">se-resize
	<div class="description">Some edge is to be moved. For example, the <code>se-resize</code> cursor is used when the movement starts from the <em>south-east</em> corner of the box.<br>In some environments, an equivalent bidirectional resize cursor is shown. For example, <code>n-resize</code> and <code>s-resize</code> are the same as <code>ns-resize</code>.</div>
	</div>
	<div class="sw-resize">sw-resize
	<div class="description">Some edge is to be moved. For example, the <code>se-resize</code> cursor is used when the movement starts from the <em>south-east</em> corner of the box.<br>In some environments, an equivalent bidirectional resize cursor is shown. For example, <code>n-resize</code> and <code>s-resize</code> are the same as <code>ns-resize</code>.</div>
	</div>
	<div class="ew-resize">ew-resize
	<div class="description">Bidirectional resize cursor.</div>
	</div>
	<div class="ns-resize">ns-resize
	<div class="description">Bidirectional resize cursor.</div>
	</div>
	<div class="nesw-resize">nesw-resize
	<div class="description">Bidirectional resize cursor.</div>
	</div>
	<div class="nwse-resize">nwse-resize
	<div class="description">Bidirectional resize cursor.</div>
	</div>
	<h2>Zooming</h2>
	<div class="zoom-in">zoom-in
	<div class="description">Something can be zoomed (magnified) in or out.</div>
	</div>
	<div class="zoom-out">zoom-out
	<div class="description">Something can be zoomed (magnified) in or out.</div>
	</div>
	</div>
	<table class="standard-table" style="text-align: justify; display: none;">
	<thead>
	<tr>
	<th scope="col">Category</th>
	<th scope="col">Keyword</th>
	<th scope="col">Description</th>
	</tr>
	</thead>
	<tbody>
	<tr style="cursor: auto">
	<th rowspan="3" scope="row">General</th>
	<td><code>auto</code></td>
	<td>
	The UA will determine the cursor to display based on the current context. E.g., equivalent to
	<code>text</code>
	when hovering text.
	</td>
	</tr>
	<tr style="cursor: default">
	<td><code>default</code></td>
	<td>The platform-dependent default cursor. Typically an arrow.</td>
	</tr>
	<tr style="cursor: none">
	<td><code>none</code></td>
	<td>No cursor is rendered.</td>
	</tr>
	<tr style="cursor: context-menu">
	<th rowspan="5" scope="row" style="cursor: auto">Links & status</th>
	<td><code>context-menu</code></td>
	<td>A context menu is available.</td>
	</tr>
	<tr style="cursor: help">
	<td><code>help</code></td>
	<td>Help information is available.</td>
	</tr>
	<tr style="cursor: pointer">
	<td><code>pointer</code></td>
	<td>
	The cursor is a pointer that indicates a link. Typically an image of a pointing hand.
	</td>
	</tr>
	<tr style="cursor: progress">
	<td><code>progress</code></td>
	<td>
	The program is busy in the background, but the user can still interact
	with the interface (in contrast to <code>wait</code>).
	</td>
	</tr>
	<tr style="cursor: wait">
	<td><code>wait</code></td>
	<td>
	The program is busy, and the user can't interact with the interface (in contrast to
	<code>progress</code>).
	Sometimes an image of an hourglass or a watch.
	</td>
	</tr>
	<tr style="cursor: cell">
	<th rowspan="4" scope="row" style="cursor: auto">Selection</th>
	<td><code>cell</code></td>
	<td>The table cell or set of cells can be selected.</td>
	</tr>
	<tr style="cursor: crosshair">
	<td><code>crosshair</code></td>
	<td>Cross cursor, often used to indicate selection in a bitmap.</td>
	</tr>
	<tr style="cursor: text">
	<td><code>text</code></td>
	<td>The text can be selected. Typically the shape of an I-beam.</td>
	</tr>
	<tr style="cursor: vertical-text">
	<td><code>vertical-text</code></td>
	<td>
	The vertical text can be selected. Typically the shape of a sideways I-beam.
	</td>
	</tr>
	<tr style="cursor: alias">
	<th rowspan="7" scope="row" style="cursor: auto">Drag & drop</th>
	<td><code>alias</code></td>
	<td>An alias or shortcut is to be created.</td>
	</tr>
	<tr style="cursor: copy">
	<td><code>copy</code></td>
	<td>Something is to be copied.</td>
	</tr>
	<tr style="cursor: move">
	<td><code>move</code></td>
	<td>Something is to be moved.</td>
	</tr>
	<tr style="cursor: no-drop">
	<td><code>no-drop</code></td>
	<td>
	An item may not be dropped at the current location.<br>[Firefox bug 275173](https://bugzil.la/275173):
	On Windows and macOS, <code>no-drop</code> is the same as <code>not-allowed</code>.
	</td>
	</tr>
	<tr style="cursor: not-allowed">
	<td><code>not-allowed</code></td>
	<td>The requested action will not be carried out.</td>
	</tr>
	<tr style="cursor: grab">
	<td><code>grab</code></td>
	<td>Something can be grabbed (dragged to be moved).</td>
	</tr>
	<tr style="cursor: grabbing">
	<td><code>grabbing</code></td>
	<td>Something is being grabbed (dragged to be moved).</td>
	</tr>
	<tr style="cursor: all-scroll">
	<th rowspan="15" scope="row" style="cursor: auto">
	Resizing & scrolling
	</th>
	<td><code>all-scroll</code></td>
	<td>
	Something can be scrolled in any direction (panned).<br>[Firefox bug
	275174](https://bugzil.la/275174):
	On Windows, <code>all-scroll</code> is the same as <code>move</code>.
	</td>
	</tr>
	<tr style="cursor: col-resize">
	<td><code>col-resize</code></td>
	<td>
	The item/column can be resized horizontally.
	Often rendered as arrows pointing left and right with a vertical bar separating them.
	</td>
	</tr>
	<tr style="cursor: row-resize">
	<td><code>row-resize</code></td>
	<td>
	The item/row can be resized vertically.
	Often rendered as arrows pointing up and down with a horizontal bar separating them.
	</td>
	</tr>
	<tr style="cursor: n-resize">
	<td><code>n-resize</code></td>
	<td rowspan="8" style="cursor: auto">
	Some edge is to be moved. For example, the <code>se-resize</code> cursor is used when the movement
	starts from
	the <em>south-east</em> corner of the box.<br>
	In some environments, an equivalent bidirectional resize cursor is shown.
	For example, <code>n-resize</code> and <code>s-resize</code> are the same as <code>ns-resize</code>.
	</td>
	</tr>
	<tr style="cursor: e-resize">
	<td><code>e-resize</code></td>
	</tr>
	<tr style="cursor: s-resize">
	<td><code>s-resize</code></td>
	</tr>
	<tr style="cursor: w-resize">
	<td><code>w-resize</code></td>
	</tr>
	<tr style="cursor: ne-resize">
	<td><code>ne-resize</code></td>
	</tr>
	<tr style="cursor: nw-resize">
	<td><code>nw-resize</code></td>
	</tr>
	<tr style="cursor: se-resize">
	<td><code>se-resize</code></td>
	</tr>
	<tr style="cursor: sw-resize">
	<td><code>sw-resize</code></td>
	</tr>
	<tr style="cursor: ew-resize">
	<td><code>ew-resize</code></td>
	<td rowspan="4" style="cursor: auto">Bidirectional resize cursor.</td>
	</tr>
	<tr style="cursor: ns-resize">
	<td><code>ns-resize</code></td>
	</tr>
	<tr style="cursor: nesw-resize">
	<td><code>nesw-resize</code></td>
	</tr>
	<tr style="cursor: nwse-resize">
	<td><code>nwse-resize</code></td>
	</tr>
	<tr style="cursor: zoom-in">
	<th rowspan="2" scope="row" style="cursor: auto">Zooming</th>
	<td><code>zoom-in</code></td>
	<td rowspan="2" style="cursor: auto">
	<p>Something can be zoomed (magnified) in or out.</p>
	</td>
	</tr>
	<tr style="cursor: zoom-out">
	<td><code>zoom-out</code></td>
	</tr>
	</tbody>
	</table>
	</body>

	</html>