CSS cursor प्रॉपर्टी उदाहरण

इंटरैक्टिव उदाहरण

नीचे प्रत्येक div पर माउस होवर करके कर्सर बदलाव देखें:

<html>
<head>
    <style>
        .cursor-demo {
            display: inline-block;
            padding: 10px 20px;
            margin: 5px;
            border: 1px solid #ccc;
            background: #f5f5f5;
            text-align: center;
            min-width: 100px;
        }
    </style>
</head>
<body>
    <p>माउस को प्रत्येक बॉक्स पर होवर करें:</p>
    
    <div class="cursor-demo" style="cursor: auto">auto</div>
    <div class="cursor-demo" style="cursor: crosshair">crosshair</div>
    <div class="cursor-demo" style="cursor: default">default</div>
    <div class="cursor-demo" style="cursor: pointer">pointer</div>
    <div class="cursor-demo" style="cursor: move">move</div>
    <div class="cursor-demo" style="cursor: e-resize">e-resize</div>
    <div class="cursor-demo" style="cursor: ne-resize">ne-resize</div>
    <div class="cursor-demo" style="cursor: nw-resize">nw-resize</div>
    <div class="cursor-demo" style="cursor: n-resize">n-resize</div>
    <div class="cursor-demo" style="cursor: se-resize">se-resize</div>
    <div class="cursor-demo" style="cursor: sw-resize">sw-resize</div>
    <div class="cursor-demo" style="cursor: s-resize">s-resize</div>
    <div class="cursor-demo" style="cursor: w-resize">w-resize</div>
    <div class="cursor-demo" style="cursor: text">text</div>
    <div class="cursor-demo" style="cursor: wait">wait</div>
    <div class="cursor-demo" style="cursor: help">help</div>
    <div class="cursor-demo" style="cursor: grab">grab</div>
    <div class="cursor-demo" style="cursor: grabbing">grabbing</div>
    <div class="cursor-demo" style="cursor: zoom-in">zoom-in</div>
    <div class="cursor-demo" style="cursor: zoom-out">zoom-out</div>
    <div class="cursor-demo" style="cursor: not-allowed">not-allowed</div>
</body>
</html>

मान विवरण तालिका