The cursor property defines the type of mouse cursor when the mouse pointer is over the element.
The cursor is defined as zero or more comma-separated <url> values, followed by a keyword value. Each of these <url>s must indicate an image file. The browser will fall back to the next image if it can’t load up the first specified image. If the browser can’t find any image, it will fall back to the keyword value.
| Initial Value | auto |
| Applies to | All elements. |
| Inherited | Yes. |
| Animatable | No. |
| Version | CSS2 |
| DOM Syntax | object.style.cursor = “cell”; |
Syntax
cursor: auto | default | none | context-menu | help | pointer | progress | wait | cell | crosshair | text | URL | vertical-text | alias | copy | move | no-drop | not-allowed | all-scroll | col-resize | row-resize | n-resize | s-resize | e-resize | w-resize | ns-resize | ew-resize | ne-resize | nw-resize | se-resize | sw-resize | nesw-resize | nwse-resize | zoom-in | zoom-out | grab | grabbingExample of the cursor property:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
text-align: center;
font-family: Roboto, Helvetica, Arial, sans-serif;
}
.auto {
cursor: auto;
}
.help {
cursor: help;
}
.cursor {
display: flex;
flex-wrap: wrap;
}
.cursor > div {
flex: 120px;
padding: 10px 2px;
white-space: nowrap;
border: 2px solid #666;
border-radius: 20px;
margin: 0 5px 5px 0;
}
.cursor > div:hover {
background: #eee;
}
</style>
</head>
<body>
<h2>Cursor property example</h2>
<div class="cursor">
<div class="auto">auto</div>
<div class="help">help</div>
</div>
</body>
</html>Here is an example with all the values of cursor property. The -webkit- extention is added for “zoom-in”, “zoom-out”, “grab” and “grabbing” values.
Example of the cursor property property with the “zoom-in”, “zoom-out”, “grab” and “grabbing” values:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
text-align: center;
font-family: Roboto, Helvetica, Arial, sans-serif;
}
.cursor {
display: flex;
flex-wrap: wrap;
}
.cursor > div {
flex: 120px;
padding: 10px 2px;
white-space: nowrap;
border: 2px solid #666;
border-radius: 20px;
margin: 0 5px 5px 0;
}
.cursor > div:hover {
background: #eee;
}
.auto {
cursor: auto;
}
.default {
cursor: default;
}
.none {
cursor: none;
}
.context-menu {
cursor: context-menu;
}
.help {
cursor: help;
}
.pointer {
cursor: pointer;
}
.progress {
cursor: progress;
}
.wait {
cursor: wait;
}
.cell {
cursor: cell;
}
.crosshair {
cursor: crosshair;
}
.text {
cursor: text;
}
.vertical-text {
cursor: vertical-text;
}
.alias {
cursor: alias;
}
.copy {
cursor: copy;
}
.move {
cursor: move;
}
.no-drop {
cursor: no-drop;
}
.not-allowed {
cursor: not-allowed;
}
.all-scroll {
cursor: all-scroll;
}
.col-resize {
cursor: col-resize;
}
.row-resize {
cursor: row-resize;
}
.n-resize {
cursor: n-resize;
}
.e-resize {
cursor: e-resize;
}
.s-resize {
cursor: s-resize;
}
.w-resize {
cursor: w-resize;
}
.ns-resize {
cursor: ns-resize;
}
.ew-resize {
cursor: ew-resize;
}
.ne-resize {
cursor: ne-resize;
}
.nw-resize {
cursor: nw-resize;
}
.se-resize {
cursor: se-resize;
}
.sw-resize {
cursor: sw-resize;
}
.nesw-resize {
cursor: nesw-resize;
}
.nwse-resize {
cursor: nwse-resize;
}
.grab {
cursor: -webkit-grab;
cursor: grab;
}
.grabbing {
cursor: -webkit-grabbing;
cursor: grabbing;
}
.zoom-in {
cursor: -webkit-zoom-in;
cursor: zoom-in;
}
.zoom-out {
cursor: -webkit-zoom-out;
cursor: zoom-out;
}
</style>
</head>
<body>
<h2>Cursor property example</h2>
<p> Hover the mouse cursor over the element to see the changes</p>
<div class="cursor">
<div class="auto">auto</div>
<div class="default">default</div>
<div class="none">none</div>
<div class="context-menu">context-menu</div>
<div class="help">help</div>
<div class="pointer">pointer</div>
<div class="progress">progress</div>
<div class="wait">wait</div>
<div class="cell">cell</div>
<div class="crosshair">crosshair</div>
<div class="text">text</div>
<div class="vertical-text">vertical-text</div>
<div class="alias">alias</div>
<div class="copy">copy</div>
<div class="move">move</div>
<div class="no-drop">no-drop</div>
<div class="not-allowed">not-allowed</div>
<div class="all-scroll">all-scroll</div>
<div class="col-resize">col-resize</div>
<div class="row-resize">row-resize</div>
<div class="n-resize">n-resize</div>
<div class="s-resize">s-resize</div>
<div class="e-resize">e-resize</div>
<div class="w-resize">w-resize</div>
<div class="ns-resize">ns-resize</div>
<div class="ew-resize">ew-resize</div>
<div class="ne-resize">ne-resize</div>
<div class="nw-resize">nw-resize</div>
<div class="se-resize">se-resize</div>
<div class="sw-resize">sw-resize</div>
<div class="nesw-resize">nesw-resize</div>
<div class="nwse-resize">nwse-resize</div>
<div class="grab">grab</div>
<div class="grabbing">grabbing</div>
<div class="zoom-in">zoom-in</div>
<div class="zoom-out">zoom-out</div>
</div>
</body>
</html>Example of the cursor property with the “url” value:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.cursor {
display: inline-block;
width: 30px;
height: 30px;
cursor: url("/uploads/media/default/0001/04/6388ec92938ec31c9f019a249174f683118b55d6.png"), auto;
}
</style>
</head>
<body>
<h2>Cursor property example</h2>
<p> Hover the mouse cursor over the element to see the changes</p>
<i class="cursor">Icon</i>
</body>
</html>