CSS - Cursor


The CSS cursor property determines the appearance of the mouse cursor when hovering over an element to which this property is applied. This property is only applicable in environments with mouse and cursor functionality. It's main purpose is to improve usability by visually representing certain functions.

Possible Curosr Values

The cursor property can have following values:

  • <url>: (optional) You have the flexibility to use a series of url() values separated by commas, with each url() pointing to an image file.

  • <x> <y>: (optional) You have the option to specify x and y coordinates that define the hotspot of the cursor and specify the exact position within the cursor image that the cursor points to.

  • <keyword>:A keyword value is required that specifies either the cursor type to use or the alternate cursor to use if none of the specified symbols can be loaded.

Keyword Based Cursor Values

The following table lists the available keywords.

Keyword Example 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.

default

The default cursor, which varies depending on the platform, is usually displayed as an arrow.

none

There is no cursor displayed.

context-menu

The displayed cursor is context menu cursor, showing there is access to a context menu.

help

The displayed cursor is help cursor, showing information for assistance is accessible.

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.

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.

alias

The displayed cursor is alias cursor, showing there is need to generate an alias or shortcut.

copy

The displayed cursor is copy cursor, showing there is a requirement to create a copy of something.

move

The displayed cursor is move-cursor, showing something can be relocated.

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.

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.

cell

The displayed cursor is cell cursor, showing the option to select the table cell or a group of cells.

crosshair

The displayed cursor is Crosshair cursor, commonly used to indicate the selection of elements in a bitmap.

text

The displayed cursor is text cursor, showing you can select the text that is normally indicated by an I-shaped cursor.

vertical-text

The displayed cursor is veritcal text cursor, showing you can select the vertical text, which is often indicated by a side-aligned I bar.

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 .

all-scroll

The displayed cursor is all scroll cursor, can scroll something in any direction, which is also referred to as panning.

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.

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.

n-resize

The displayed cursor is north direction resize cursor, showing north side can be moved or shifted.

e-resize

The displayed cursor is east direction resize cursor, showing east side can be moved or shifted.

s-resize

The displayed cursor is south direction resize cursor, showing south side can be moved or shifted.

w-resize

The displayed cursor is west direction resize cursor, showing west 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.

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.

ew-size

The displayed cursor is east-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.

Applies to

All the HTML elements.

DOM Syntax

object.style.cursor = "pointer";

Some points to note:

  • The cursor property is characterized by a combination of values, which can range from zero to many <url>, separated by commas followed by a mandatory keyword (all keywords listed in table in the following section) value.

  • Each <url> should point to an image file.

  • The browser will try to load the first image specified, falling back to the next if it can't, and falling back to the keyword value if no images could be loaded (or if none were specified).

CSS Cursor - Keyword Value

Here is the example which shows various types of cursors in css −

<html>
<head>
<title>All CSS Cursors</title>
<style>
   .demo-cursor {
      display: inline-block;
      background-color: LightYellow;
      width: 100px;
      height: 100px;
      margin: 10px;
      border: 3px solid #ccc;
      cursor: pointer;
   }
   .default { 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; }
   .grabbing { cursor: grabbing; }
</style>
</head>
<body>
<h1>All CSS Cursors, hover the mouse on the blocks.</h1>
   <div class="demo-cursor auto"><h3 style="text-align:center;">Auto</h3></div>
   <div class="demo-cursor default"><h3 style="text-align:center;">Default</h3></div>
   <div class="demo-cursor crosshair"><h3 style="text-align:center;">Crosshair</h3></div>
   <div class="demo-cursor pointer"><h3 style="text-align:center;">Pointer</h3></div>
   <div class="demo-cursor move"><h3 style="text-align:center;">Move</h3></div>
   <div class="demo-cursor text"><h3 style="text-align:center;">Text</h3></div>
   <div class="demo-cursor wait"><h3 style="text-align:center;">Wait</h3></div>
   <div class="demo-cursor help"><h3 style="text-align:center;">Help</h3></div>
   <div class="demo-cursor not-allowed"><h3 style="text-align:center;">Not-allowed</h3></div>
   <div class="demo-cursor progress"><h3 style="text-align:center;">Progress</h3></div>
   <div class="demo-cursor alias"><h3 style="text-align:center;">Alias</h3></div>
   <div class="demo-cursor copy"><h3 style="text-align:center;">Copy</h3></div>
   <div class="demo-cursor no-drop"><h3 style="text-align:center;">No-drop</h3></div>
   <div class="demo-cursor e-resize"><h3 style="text-align:center;">e-resize</h3></div>
   <div class="demo-cursor n-resize"><h3 style="text-align:center;">n-resize</h3></div>
   <div class="demo-cursor ne-resize"><h3 style="text-align:center;">ne-resize</h3></div>
   <div class="demo-cursor nw-resize"><h3 style="text-align:center;">nw-resize</h3></div>
   <div class="demo-cursor s-resize"><h3 style="text-align:center;">s-resize</h3></div>
   <div class="demo-cursor se-resize"><h3 style="text-align:center;">se-resize</h3></div>
   <div class="demo-cursor sw-resize"><h3 style="text-align:center;">sw-resize</h3></div>
   <div class="demo-cursor w-resize"><h3 style="text-align:center;">w-resize</h3></div>
   <div class="demo-cursor ew-resize"><h3 style="text-align:center;">ew-resize</h3></div>
   <div class="demo-cursor ns-resize"><h3 style="text-align:center;">ns-resize</h3></div>
   <div class="demo-cursor nesw-resize"><h3 style="text-align:center;">nesw-resize</h3></div>
   <div class="demo-cursor nwse-resize"><h3 style="text-align:center;">nwse-resize</h3></div>
   <div class="demo-cursor col-resize"><h3 style="text-align:center;">col-resize</h3></div>
   <div class="demo-cursor row-resize"><h3 style="text-align:center;">row-resize</h3></div>
   <div class="demo-cursor zoom-in"><h3 style="text-align:center;">Zoom-in</h3></div>
   <div class="demo-cursor zoom-out"><h3 style="text-align:center;">Zoom-out</h3></div>
   <div class="demo-cursor grab"><h3 style="text-align:center;">Grab</h3></div>
   <div class="demo-cursor grabbing"><h3 style="text-align:center;">Grabbing</h3></div>
</body>
</html>

CSS Cursor - <url> Value

Here is the example which shows using image as cursor value−

<html>
<head>
<title>All CSS Cursors</title>
<style>
   .demo-cursor {
      display: inline-block;
      background-color: LightYellow;
      width: 100px;
      height: 100px;
      margin: 10px;
      border: 3px solid #ccc;
      cursor: url(images/try-it.jpg), pointer;
   }
</style>
</head>
<body>
<h1>Image CSS Cursors, hover the mouse on the block.</h1>
   <div class="demo-cursor"><h3 style="text-align:center;">Image Cursor</h3></div>
  </div>
</body>
</html>

CSS Cursor - <url> Multiple Values

Here is the example which shows using multiple images (comma separated) as cursor values−

<html>
<head>
<title>All CSS Cursors</title>
<style>
   .demo-cursor {
      display: inline-block;
      background-color: LightYellow;
      width: 100px;
      height: 100px;
      margin: 10px;
      border: 3px solid #ccc;
      cursor: url(images/try-it.jpg),url(images/cursor-pointer.png), crosshair;
   }
</style>
</head>
<body>
<h1>Image CSS Cursors, hover the mouse on the block.</h1>
   <div class="demo-cursor"><h3 style="text-align:center;">Image Cursor</h3></div>
  </div>
</body>
</html>

Try renaming first image file name to try-it-1.jpg (so that image is not found) and then execute the progarm. We see the fallback effect, i.e. when first image is not found the source, control falls back on second image and that is used as a cursor even if that cursor is not found then it falls back to crosshair.

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements