CSS - cursor Property

Quiz

CSS cursor property determines the appearance of the mouse cursor when hovering over an element to which this property is applied. Its main purpose is to improve usability by visually representing certain functions.

Syntax

cursor: value;

Property Values

Value	Description
auto	The displayed cursor is determined by the user agent based on the current context. This is the default property that the browser uses to define the cursor.
alias	The displayed cursor is alias cursor, showing there is need to generate an alias or shortcut.
all-scroll	The displayed cursor shows that scrolling is done.
cell	The displayed cursor is cell cursor, showing the option to select the table cell or a group of cells.
col-resize	The displayed cursor is coloumn-resize cursor, showing element or column may be subject to horizontal resizing, often represented as arrows pointing left and right, separated by a vertical bar.
copy	The displayed cursor is copy cursor, showing there is a requirement to create a copy of something.
crosshair	The displayed cursor is Crosshair cursor, commonly used to indicate the selection of elements in a bitmap.
default	The default cursor, which varies depending on the platform, is usually displayed as an arrow.
e-resize	The displayed cursor is south direction resize cursor, showing south side can be moved or shifted.
ew-size	The displayed cursor is east-west resize cursor, showing cursor for bidirectional resizing.
grab	The displayed cursor is grab cursor, showing that can grab the element and can be dragged to relocate it.
grabbing	The displayed cursor is grabbing cursor, showing something is being held or pulled to facilitate its movement.
help	The displayed cursor is help cursor, showing information for assistance is accessible.
move	The displayed cursor is move-cursor, showing something can be relocated.
n-resize	The displayed cursor is north direction resize cursor, showing north side can be moved or shifted.
ne-resize	The displayed cursor is north-east resize cursor, showing cursor for bidirectional resizing.
nw-resize	The displayed cursor is north-west resize cursor, showing cursor for bidirectional resizing.
ns-resize	The displayed cursor is north-south resize cursor, showing cursor for bidirectional resizing.
nesw-resize	The displayed cursor is north-east south-west resize cursor, showing cursor for bidirectional resizing.
nwse-resize	The displayed cursor is north-west south-east resize cursor, showing cursor for bidirectional resizing.
no-drop	The displayed cursor is no-drop cursor, showing it may not be possible to place the item in its current location.
not-allowed	The displayed cursor is not-allowed cursor, showing the requested action will not be performed.
pointer	The displayed cursor is pointer cursor, showing the cursor serves as an indicator pointing to a hyperlink.
progress	The displayed cursor is progress cursor, showing the program is performing background tasks, allowing the user to maintain interaction with the interface instead of having to wait for its completion.
row-resize	The displayed cursor is row-resize cursor, showing element or line may be subject to vertical resizing, usually represented by arrows pointing both upward and downward, separated by a horizontal bar.
s-resize	The displayed cursor is south direction resize cursor, showing south side can be moved or shifted.
se-resize	The displayed cursor is south-east resize cursor, showing cursor for bidirectional resizing.
sw-resize	The displayed cursor is south-west resize cursor, showing cursor for bidirectional resizing.
text	The displayed cursor is text cursor, showing you can select the text that is normally indicated by an I-shaped cursor.
URL	The displayed cursor is an image specified by the comma separated urls, a generic cursor must also be provided at the end of urls in case the image can not be used.
wait	The displayed cursor is cursor, The program is currently occupied, and the user cannot engage with the interface, this state is sometimes represented by an image of an hourglass or a watch.
w-resize	The displayed cursor is west direction resize cursor, showing west side can be moved or shifted.
zoom-in	The displayed cursor is zoom-in, showing an object can be enlarged through zooming.
zoom-out	The displayed cursor is zoom-out, showing an object can be shrunk through zooming.

Examples of CSS Cursor Property

The following examples demostrate the cursor property with different values.

Demonstration of All Cursors

The following example shows the demonstration of a number of mentioned cursors, to observe the effect hover over each block.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .demo-cursor {
         text-align: center;
         display: inline-block;
         width: 100px;
         height: 100px;
         margin: 10px;
         border: 3px solid #ccc;
         cursor: pointer;
      }

      .demo-cursor:hover {
         background-color: lightgrey;
      }

      .default:hover {
         cursor: default;
      }

      .auto {
         cursor: auto;
      }

      .crosshair {
         cursor: crosshair;
      }

      .pointer {
         cursor: pointer;
      }

      .move {
         cursor: move;
      }

      .text {
         cursor: text;
      }

      .wait {
         cursor: wait;
      }

      .help {
         cursor: help;
      }

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

      .progress {
         cursor: progress;
      }

      .alias {
         cursor: alias;
      }

      .copy {
         cursor: copy;
      }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

      .grab {
         cursor: grab;
      }

      .cell {
         cursor: cell;
      }

      .grabbing {
         cursor: grabbing;
      }

      .all-scroll {
         cursor: all-scroll;
      }
    </style>
</head>

<body>
   <h2>
      CSS cursor property
   </h2>
   <h3>
      All CSS Cursors, hover the mouse on the blocks.
   </h3>
   <div class="demo-cursor auto">
      <h3>
         Auto
      </h3>
   </div>
   <div class="demo-cursor alias">
      <h3>
         Alias
      </h3>
   </div>
   <div class="demo-cursor all-scroll">
      <h3>
         All-scroll
      </h3>
   </div>
   <div class="demo-cursor cell">
      <h3>
         cell
      </h3>
   </div>
   <div class="demo-cursor col-resize">
      <h3>
         col-resize
      </h3>
   </div>
   <div class="demo-cursor copy">
      <h3>
         Copy
      </h3>
   </div>
   <div class="demo-cursor crosshair">
      <h3>
         Crosshair
      </h3>
   </div>
   <div class="demo-cursor default">
      <h3>
         Default
      </h3>
   </div>
   <div class="demo-cursor e-resize">
      <h3>
         e-resize
      </h3>
   </div>
   <div class="demo-cursor ew-resize">
      <h3>
         ew-resize
      </h3>
   </div>
   <div class="demo-cursor grab">
      <h3>
         Grab
      </h3>
   </div>
   <div class="demo-cursor grabbing">
      <h3>
         Grabbing
      </h3>
   </div>
   <div class="demo-cursor help">
      <h3>
         Help
      </h3>
   </div>
   <div class="demo-cursor move">
      <h3>
         Move
      </h3>
   </div>
   <div class="demo-cursor n-resize">
      <h3>
         n-resize
      </h3>
   </div>
   <div class="demo-cursor ne-resize">
      <h3>
         ne-resize
      </h3>
   </div>
   <div class="demo-cursor nw-resize">
      <h3>
         nw-resize
      </h3>
   </div>
   <div class="demo-cursor ns-resize">
      <h3>
         ns-resize
      </h3>
   </div>
   <div class="demo-cursor nesw-resize">
      <h3>
         nesw-resize
      </h3>
   </div>
   <div class="demo-cursor nwse-resize">
      <h3>
         nwse-resize
      </h3>
   </div>
   <div class="demo-cursor no-drop">
      <h3>
         No-drop
      </h3>
   </div>
   <div class="demo-cursor not-allowed">
      <h3>
         Not-allowed
      </h3>
   </div>
   <div class="demo-cursor pointer">
      <h3>
         Pointer
      </h3>
   </div>
   <div class="demo-cursor progress">
      <h3>
         Progress
      </h3>
   </div>
   <div class="demo-cursor row-resize">
      <h3>
         row-resize
      </h3>
   </div>
   <div class="demo-cursor s-resize">
      <h3>
         s-resize
      </h3>
   </div>
   <div class="demo-cursor se-resize">
      <h3>
         se-resize
      </h3>
   </div>
   <div class="demo-cursor sw-resize">
      <h3>
         sw-resize
      </h3>
   </div>
   <div class="demo-cursor text">
      <h3>
         Text
      </h3>
   </div>
   <div class="demo-cursor wait">
      <h3>
         Wait
      </h3>
   </div>
   <div class="demo-cursor w-resize">
      <h3>
         w-resize
      </h3>
   </div>
   <div class="demo-cursor zoom-in">
      <h3>
         Zoom-in
      </h3>
   </div>
   <div class="demo-cursor zoom-out">
      <h3>
         Zoom-out
      </h3>
   </div>

</body>

</html>

Setting an Image as a Cursor

An image may also be used as a cursor, the url of the required image has to be mentioned. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .demo-cursor {
         text-align: center;
         display: inline-block;
         background-color: lightgrey;
         width: 100px;
         height: 100px;
         margin: 10px;
         border: 3px solid #ccc;
         cursor: url(/css/images/try-it.jpg), pointer;
      }
   </style>
</head>

<body>
   <h2>
      CSS cursor property
   </h2>
   <h3>
      Hover over the block
   </h3>
   <div class="demo-cursor">
      <h3>
         Image Cursor
      </h3>
   </div>
   </div>
</body>

</html>

Supported Browsers

Property
cursor	5.0	5.5	4.0	5.0	9.6

css_reference.htm

Print Page