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. Its main purpose is to improve usability by visually representing certain functions.
Possible 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.
The following table lists the available keywords.
| Category | Value | Example | Description |
|---|---|---|---|
| General | 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. | ||
| Links and Status | 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. | |
| Drag and Drop | 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. | |
| Selection | 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. | |
| Zooming | 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 . | |
| Resizing and Scrolling | 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 = "cell";
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-text1.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 thene execute the program. We see the fallback effect, i.e when first image is not found the source, control fallsback on second image and that is used as cursor.
Leave a Reply