The CSS cursor property defines the mouse cursor that will be displayed when pointing over an element.
Demo:
Syntax:
cursor: value;alias – the cursor specifies an alias of something is to be created.
<!DOCTYPE html>
<html>
<head>
<style>
.alias {cursor: alias;}
</style>
</head>
<body>
<p class="alias">Mouse over the text.</p>
</body>
</html>Output:
Mouse over the text.
all-scroll – the cursor specifies that something can be scrolled (in any direction).
<!DOCTYPE html>
<html>
<head>
<style>
.all-scroll {cursor: all-scroll;}
</style>
</head>
<body>
<p class="all-scroll">Mouse over the text.</p>
</body>
</html>Output:
Mouse over the text.
auto (default) – the browser settles a cursor.
<!DOCTYPE html>
<html>
<head>
<style>
.auto {cursor: auto;}
</style>
</head>
<body>
<p class="auto">Mouse over the text.</p>
</body>
</html>Output:
Mouse over the text.
cell – the cursor specifies that a cell may be selected.
<!DOCTYPE html>
<html>
<head>
<style>
.cell {cursor: cell;}
</style>
</head>
<body>
<p class="cell">Mouse over the text.</p>
</body>
</html>Output:
Mouse over the text.
context-menu – the cursor specifies that a context-menu is available.
<!DOCTYPE html>
<html>
<head>
<style>
.context-menu {cursor: context-menu;}
</style>
</head>
<body>
<p class="context-menu">Mouse over the text.</p>
</body>
</html>Output:
col-resize – the cursor specifies that the column can be resized horizontally.
<!DOCTYPE html>
<html>
<head>
<style>
.col-resize {cursor: col-resize;}
</style>
</head>
<body>
<p class="col-resize">Mouse over the text.</p>
</body>
</html>Output:
Mouse over the text.
copy – the cursor specifies something is to be copied.
<!DOCTYPE html>
<html>
<head>
<style>
.copy {cursor: copy;}
</style>
</head>
<body>
<p class="copy">Mouse over the text.</p>
</body>
</html>Output:
Mouse over the text.
crosshair – the cursor render as a crosshair.
<!DOCTYPE html>
<html>
<head>
<style>
.crosshair {cursor: crosshair;}
</style>
</head>
<body>
<p class="crosshair">Mouse over the text.</p>
</body>
</html>Output:
Mouse over the text.
e-resize – the cursor specifies that an edge of a box is to be moved right (east).
<!DOCTYPE html>
<html>
<head>
<style>
.e-resize {cursor: e-resize;}
</style>
</head>
<body>
<p class="e-resize">Mouse over the text.</p>
</body>
</html>Output:
Mouse over the text.
ew-resize – specifies a bidirectional resize cursor.
<!DOCTYPE html>
<html>
<head>
<style>
.ew-resize {cursor: ew-resize;}
</style>
</head>
<body>
<p class="ew-resize">Mouse over the text.</p>
</body>
</html>Output:
Mouse over the text.
grab – the cursor specifies that something can be grabbed.
<!DOCTYPE html>
<html>
<head>
<style>
.grab {cursor: -webkit-grab; cursor: grab;}
</style>
</head>
<body>
<p class="grab">Mouse over the text.</p>
</body>
</html>Output:
Mouse over the text.
grabbing – the cursor specifies that something can be grabbed.
<!DOCTYPE html>
<html>
<head>
<style>
.grab {cursor: -webkit-grabbing;cursor: grabbing;}
</style>
</head>
<body>
<p class="grabbing">Mouse over the text.</p>
</body>
</html>Output:
Mouse over the text.
help – the cursor specifies that help is available.
<!DOCTYPE html>
<html>
<head>
<style>
.help {cursor: help;}
</style>
</head>
<body>
<p class="help">Mouse over the text.</p>
</body>
</html>Output:
Mouse over the text.
move – the cursor specifies something is to be moved.
<!DOCTYPE html>
<html>
<head>
<style>
.move {cursor: move;}
</style>
</head>
<body>
<p class="move">Mouse over the text.</p>
</body>
</html>Output:
Mouse over the text.
n-resize – the cursor specifies that an edge of a box is to be moved up (north).
<!DOCTYPE html>
<html>
<head>
<style>
.n-resize {cursor: n-resize;}
</style>
</head>
<body>
<p class="n-resize">Mouse over the text.</p>
</body>
</html>Output:
Mouse over the text.
ne-resize – the cursor specifies that an edge of a box is to be moved up and right (north/east).
<!DOCTYPE html>
<html>
<head>
<style>
.ne-resize {cursor: ne-resize;}
</style>
</head>
<body>
<p class="ne-resize">Mouse over the text.</p>
</body>
</html>Output:
Mouse over the text.
nesw-resize – specifies a bidirectional resize cursor.
<!DOCTYPE html>
<html>
<head>
<style>
.nesw-resize {cursor: nesw-resize;}
</style>
</head>
<body>
<p class="nesw-resize">Mouse over the text.</p>
</body>
</html>Output:
Mouse over the text.
ns-resize – specifies a bidirectional resize cursor.
<!DOCTYPE html>
<html>
<head>
<style>
.ns-resize {cursor: ns-resize;}
</style>
</head>
<body>
<p class="ns-resize">Mouse over the text.</p>
</body>
</html>Output:
Mouse over the text.
nw-resize – the cursor specifies that an edge of a box is to be moved up and left (north/west).
<!DOCTYPE html>
<html>
<head>
<style>
.nw-resize {cursor: nw-resize;}
</style>
</head>
<body>
<p class="nw-resize">Mouse over the text.</p>
</body>
</html>Output:
Mouse over the text.
nwse-resize – specifies a bidirectional resize cursor.
<!DOCTYPE html>
<html>
<head>
<style>
.nwse-resize {cursor: nwse-resize;}
</style>
</head>
<body>
<p class="nwse-resize">Mouse over the text.</p>
</body>
</html>Output:
Mouse over the text.
no-drop – the cursor specifies that the dragged item cannot be dropped here.
<!DOCTYPE html>
<html>
<head>
<style>
.no-drop {cursor: no-drop;}
</style>
</head>
<body>
<p class="no-drop">Mouse over the text.</p>
</body>
</html>Output:
Mouse over the text.
none – no cursor is rendered for the element.
<!DOCTYPE html>
<html>
<head>
<style>
.none {cursor: none;}
</style>
</head>
<body>
<p class="none">Mouse over the text.</p>
</body>
</html>Output:
Mouse over the text.
not-allowed – the cursor specifies that the requested action will not be executed.
<!DOCTYPE html>
<html>
<head>
<style>
.not-allowed {cursor: not-allowed;}
</style>
</head>
<body>
<p class="not-allowed">Mouse over the text.</p>
</body>
</html>Output:
Mouse over the text.
pointer – the cursor is a pointer and specifies a link.
<!DOCTYPE html>
<html>
<head>
<style>
.pointer {cursor: pointer;}
</style>
</head>
<body>
<p class="pointer">Mouse over the text.</p>
</body>
</html>Output:
Mouse over the text.
progress – the cursor specifies that the program is busy (in progress).
<!DOCTYPE html>
<html>
<head>
<style>
.progress {cursor: progress;}
</style>
</head>
<body>
<p class="progress">Mouse over the text.</p>
</body>
</html>Output:
Mouse over the text.
row-resize – the cursor specifies that the row can be resized vertically.
<!DOCTYPE html>
<html>
<head>
<style>
.row-resize {cursor: row-resize;}
</style>
</head>
<body>
<p class="row-resize">Mouse over the text.</p>
</body>
</html>Output:
Mouse over the text.
s-resize – the cursor specifies that an edge of a box is to be moved down (south).
<!DOCTYPE html>
<html>
<head>
<style>
.s-resize {cursor: s-resize;}
</style>
</head>
<body>
<p class="s-resize">Mouse over the text.</p>
</body>
</html>Output:
Mouse over the text.
se-resize – the cursor specifies that an edge of a box is to be moved down and right (south/east).
<!DOCTYPE html>
<html>
<head>
<style>
.se-resize {cursor: se-resize;}
</style>
</head>
<body>
<p class="se-resize">Mouse over the text.</p>
</body>
</html>Output:
Mouse over the text.
sw-resize – the cursor specifies that an edge of a box is to be moved down and left (south/west).
<!DOCTYPE html>
<html>
<head>
<style>
.sw-resize {cursor: sw-resize;}
</style>
</head>
<body>
<p class="sw-resize">Mouse over the text.</p>
</body>
</html>Output:
Mouse over the text.
text – the cursor specifies the text that may be selected.
<!DOCTYPE html>
<html>
<head>
<style>
.text {cursor: text;}
</style>
</head>
<body>
<p class="text">Mouse over the text.</p>
</body>
</html>
Output:
Mouse over the text.
URL – a comma-separated list of URLs to custom cursors – always define a generic cursor at the end of the list, in case none of the URL-defined cursors can be used.
<!DOCTYPE html>
<html>
<head>
<style>
.url {cursor: url(https://lenadesign.org/wp-content/uploads/2022/06/cursor.png),auto;}
</style>
</head>
<body>
<p class="url">Mouse over the text.</p>
</body>
</html>Output:
Mouse over the text.
vertical-text – the cursor specifies vertical-text that may be selected.
<!DOCTYPE html>
<html>
<head>
<style>
.vertical-text {cursor: vertical-text;}
</style>
</head>
<body>
<p class="vertical-text">Mouse over the text.</p>
</body>
</html>Output:
Mouse over the text.
w-resize – the cursor specifies that an edge of a box is to be moved left (west).
<!DOCTYPE html>
<html>
<head>
<style>
.w-resize {cursor: w-resize;}
</style>
</head>
<body>
<p class="w-resize;">Mouse over the text.</p>
</body>
</html>Output:
Mouse over the text.
wait – the cursor specifies that the program is busy.
<!DOCTYPE html>
<html>
<head>
<style>
.wait {cursor: wait;}
</style>
</head>
<body>
<p class="wait">Mouse over the text.</p>
</body>
</html>Output:
Mouse over the text.
zoom-in – the cursor specifies that something can be zoomed in.
<!DOCTYPE html>
<html>
<head>
<style>
.zoom-in {cursor: zoom-in;}
</style>
</head>
<body>
<p class="zoom-in">Mouse over the text.</p>
</body>
</html>Output:
Mouse over the text.
zoom-out – the cursor specifies that something can be zoomed out.
<!DOCTYPE html>
<html>
<head>
<style>
.zoom-out {cursor: zoom-out;}
</style>
</head>
<body>
<p class="zoom-out">Mouse over the text.</p>
</body>
</html>Output:
Mouse over the text.
Enjoy coding!