CSS cursor Property

CSS cursor Property


CSS cursor Property
 
This property determines how the cursor displays when passed over the affected element. 
 
Syntax -
 
cursor: url(address of cursor file) | auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize | text | wait | help | progress | inherit
 
Now we will see the values with their descriptions -
 
 
Now we will see Example -
Example - Using all the cursor pointers -
 
<!DOCTYPE html>
<html>

<head>
  <style>
.s-resize {
      cursor: s-resize;
    }

    .se-resize {
      cursor: se-resize;
    }

    .sw-resize {
      cursor: sw-resize;
    }

    .text {
      cursor: text;
    }


    .w-resize {
      cursor: w-resize;
    }

    .wait {
      cursor: wait;
    }

    .zoom-in {
      cursor: zoom-in;
    }

    .zoom-out {
      cursor: zoom-out;
    }
    .alias {
      cursor: alias;
    }

    .all-scroll {
      cursor: all-scroll;
    }

    .auto {
      cursor: auto;
    }

    .cell {
      cursor: cell;
    }

    .context-menu {
      cursor: context-menu;
    }

    .col-resize {
      cursor: col-resize;
    }

    .copy {
      cursor: copy;
    }

    .crosshair {
      cursor: crosshair;
    }

    .default {
      cursor: default;
    }

    .e-resize {
      cursor: e-resize;
    }

    .ew-resize {
      cursor: ew-resize;
    }
    .grabbing {
      cursor: grabbing;
    }
  .ns-resize {
      cursor: ns-resize;
    }

    .nw-resize {
      cursor: nw-resize;
    }

    .nwse-resize {
      cursor: nwse-resize;
    }

    .no-drop {
      cursor: no-drop;
    }

    .none {
      cursor: none;
    }

    .not-allowed {
      cursor: not-allowed;
    }

    .pointer {
      cursor: pointer;
    }

    .progress {
      cursor: progress;
    }

    .row-resize {
      cursor: row-resize;
    }

    .help {
      cursor: help;
    }

    .move {
      cursor: move;
    }

    .n-resize {
      cursor: n-resize;
    }

    .ne-resize {
      cursor: ne-resize;
    }

    .nesw-resize {
      cursor: nesw-resize;
    }

 

   
  </style>
</head>

<body>

  <h1>All the cursor pointers are given below -</h1>
  <p class="alias">alias</p>
  <p class="all-scroll">all-scroll</p>
  <p class="auto">auto</p>
  <p class="cell">cell</p>
  <p class="context-menu">context-menu</p>
  <p class="col-resize">col-resize</p>
  <p class="copy">copy</p>
  <p class="crosshair">crosshair</p>
  <p class="default">default</p>
  <p class="e-resize">e-resize</p>
  <p class="ew-resize">ew-resize</p>
  <p class="grabbing">grabbing</p>
  <p class="help">help</p>
  <p class="move">move</p>
  <p class="n-resize">n-resize</p>
  <p class="ne-resize">ne-resize</p>
  <p class="nesw-resize">nesw-resize</p>
  <p class="ns-resize">ns-resize</p>
  <p class="nw-resize">nw-resize</p>
  <p class="nwse-resize">nwse-resize</p>
  <p class="no-drop">no-drop</p>
  <p class="none">none</p>
  <p class="not-allowed">not-allowed</p>
  <p class="pointer">pointer</p>
  <p class="progress">progress</p>
  <p class="row-resize">row-resize</p>
  <p class="s-resize">s-resize</p>
  <p class="se-resize">se-resize</p>
  <p class="sw-resize">sw-resize</p>
  <p class="text">text</p>
  <p class="w-resize">w-resize</p>
  <p class="wait">wait</p>
  <p class="zoom-in">zoom-in</p>
  <p class="zoom-out">zoom-out</p>

</body>

</html>
 
Output -