CSS cursor

Changing Cursor

In this lesson, we will learn how set different types of cursor for different situation using CSS cursor property.

CSS cursor Property

The CSS cursor property allows you to change the appearance of the mouse cursor when it hovers over an element.

Here is the list of commonly used cursors for various purposes.

default: The default cursor is the standard arrow pointer used for most elements.
pointer: The pointer cursor indicates a clickable element, such as links and buttons.
text: The text cursor indicates that the text within an element is selectable.
move: The move cursor indicates that an element can be moved, usually in drag-and-drop interactions.
not-allowed: The not-allowed cursor indicates that an action is not allowed, such as when hovering over a disabled button.
wait: The wait cursor indicates that the browser is busy or an action is in progress.
crosshair: The crosshair cursor is used for precise selections, like when selecting an area.
help: The help cursor indicates that an element provides help or additional information.
zoom-in: The zoom-in cursor indicate the ability to zoom in on an element, such as images or maps.
zoom-out: The zoom-out cursor indicate the ability to zoom out on an element, such as images or maps.
grab: The grab cursor indicate the ability to drag an element.
grabbing: The grabbing cursor indicate the element has been grabbed.
col-resize: The col-resize cursor indicate the ability to resize an element horizontally.
row-resize: The row-resize cursor indicate the ability to resize an element vertically.

In the example given below, move the mouse cursor on each div element to see the cursor type.

Example

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>CSS cursor Example</title>

    <!-- Internal CSS -->
    <style>
        div {
            width: 200px;
            height: 50px;
            background-color: lightblue;
            text-align: center;
            margin-bottom: 5px;
            line-height: 50px;
        }

        #c1 {
            cursor: default;
        }

        #c2 {
            cursor: pointer;
        }

        #c3 {
            cursor: text;
        }

        #c4 {
            cursor: move;
        }

        #c5 {
            cursor: not-allowed;
        }

        #c6 {
            cursor: wait;
        }

        #c7 {
            cursor: crosshair;
        }

        #c8 {
            cursor: help;
        }

        #c9 {
            cursor: zoom-in;
        }

        #c10 {
            cursor: zoom-out;
        }

        #c11 {
            cursor: grab;
        }

        #c12 {
            cursor: grabbing;
        }

        #c13 {
            cursor: col-resize;
        }

        #c14 {
            cursor: row-resize;
        }
    </style>
</head>

<body>
    <div id="c1">default cursor</div>
    <div id="c2">pointer cursor</div>
    <div id="c3">text cursor</div>
    <div id="c4">move cursor</div>
    <div id="c5">not-allowed cursor</div>
    <div id="c6">wait cursor</div>
    <div id="c7">crosshair cursor</div>
    <div id="c8">help cursor</div>
    <div id="c9">zoom-in cursor</div>
    <div id="c10">zoom-out cursor</div>
    <div id="c11">grab cursor</div>
    <div id="c12">grabbing cursor</div>
    <div id="c13">col-resize cursor</div>
    <div id="c14">row-resize cursor</div>
</body>

</html>

Previous Next

CSS cursor

CSS cursor Property

Our Courses

News Updates