CSS Cursors

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

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 tutorials with CodeWithHarry</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 and you’ll see outputs for each individual case. The names of the properties are self-explanatory to tell you what output you would be getting.

Eduaction Management 959 Lahore

Code With Jahangir

CSS Cursors

FREE COURSES

FREE CERTIFICATE

CSS Cursors

CSS Cursors

Contact Form