CSS Cursors

 

CSS Cursors

This property is generally used with the hover property. We can add how the mouse cursor responds when we hover it on the element to make the element stand out.

Eg:

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Hover & Cursor</title>
    <style>
        h1 {
            font-size: 20px;
            color: royalblue;
        }
       
        div {
            background-color: violet;
        }
    </style>
</head>

<body>
    <h1>CSS with Maxoncodes</h1>
    <div style="cursor:pointer">Pointer</div>
    <div style="cursor:alias">alias Value</div>
    <div style="cursor:auto">auto Value</div>
    <div style="cursor:all-scroll">all-scroll value</div>
    <div style="cursor:col-resize">col-resize value</div>
    <div style="cursor:crosshair">Crosshair</div>
    <div style="cursor:default">Default value</div>
    <div style="cursor:copy">copy value</div>
    <div style="cursor:move">Move</div>
    <div style="cursor:e-resize">e-resize</div>
    <div style="cursor:ew-resize">ew-resize</div>
    <div style="cursor:ne-resize">ne-resize</div>
    <div style="cursor:nw-resize">nw-resize</div>
    <div style="cursor:n-resize">n-resize</div>
    <div style="cursor:se-resize">se-resize</div>
    <div style="cursor:sw-resize">sw-resize</div>
    <div style="cursor:w-resize">w-resize</div>
    <div style="cursor:s-resize">s-resize</div>
    <div style="cursor:wait">wait</div>
    <div style="cursor:text">text</div>
    <div style="cursor:help">help</div>
    <div style="cursor:progress">Progress</div>
    <div style="cursor:no-drop">no-drop</div>
    <div style="cursor:not-allowed">not-allowed</div>
    <div style="cursor:vertical-text">vertical-text</div>
    <div style="cursor:zoom-in">Zoom-in</div>
    <div style="cursor:zoom-out">Zoom-out</div>
</body>

</html>


Try running this code in your editor; you’ll see outputs for each case. The names of the properties are self-explanatory to tell you what output you would be getting.

Output:

Custom Cursor

With all the predefined cursors, we can create our own cursor.

Syntax:

.selector {
    cursor: url('custom-cursor.png'), auto;
}

 

The auto keyword ensures that the browser falls back to the default cursor when the custom cursor fails to load.