The cursor property in CSS allows you to control the type of cursor that is displayed when a user hovers over an element on a web page. This property enhances user interaction by providing visual cues about what actions are possible with the element being hovered over. For instance, changing the cursor to a pointer indicates that the element is clickable, while other cursors can indicate actions such as resizing or dragging.
The cursor property can take several predefined keyword values or custom URLs for cursor images. Here’s a breakdown of the most commonly used values:
auto: The browser selects the cursor based on the context. This is typically the default cursor.
default: The default arrow cursor (usually an arrow). It is the standard cursor used for most elements.
pointer: The hand cursor, commonly used to indicate that an element is clickable.
text: The I-beam cursor, indicating that the text can be selected or edited.
move: Indicates that an element can be moved.
wait: The hourglass or spinning wheel cursor, indicating that the user should wait.
help: The question mark cursor, indicating that help is available.
not-allowed: Indicates that the action is not allowed.
n-resize: Cursor indicating that the user can resize the element vertically from the top edge.
s-resize: Cursor indicating that the user can resize the element vertically from the bottom edge.
e-resize: Cursor indicating that the user can resize the element horizontally from the right edge.
w-resize: Cursor indicating that the user can resize the element horizontally from the left edge.
ne-resize: Cursor indicating that the user can resize the element diagonally (northeast).
nw-resize: Cursor indicating that the user can resize the element diagonally (northwest).
se-resize: Cursor indicating that the user can resize the element diagonally (southeast).
sw-resize: Cursor indicating that the user can resize the element diagonally (southwest).
url('path/to/cursor.png'): Specifies a custom image for the cursor. You can use URLs to point to cursor images, and optionally provide fallback cursors in case the image cannot be loaded.
progress: Indicates that the system is busy but still responsive.
crosshair: A crosshair cursor, often used in graphical applications or for precise selections.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Cursor Property Example</title>
<style>
div {
border: 2px solid black; <!-- Add a border around all divs -->
padding: 10px; <!-- Optional: Add some padding inside the divs -->
margin: 10px; <!-- Optional: Add some margin outside the divs -->
width: 35%;
}
.default-cursor {
cursor: default;
}
.pointer-cursor {
cursor: pointer;
}
.text-cursor {
cursor: text;
}
.move-cursor {
cursor: move;
}
.wait-cursor {
cursor: wait;
}
.help-cursor {
cursor: help;
}
.not-allowed-cursor {
cursor: not-allowed;
}
.resize-cursor {
cursor: nw-resize; <!-- Example for diagonal resize -->
}
.custom-cursor {
cursor: url('https://example.com/path/to/custom-cursor.png'), auto;
}
</style>
</head>
<body>
<div>
<div class="default-cursor">
Default Cursor
</div>
<div class="pointer-cursor">
Pointer Cursor (Clickable Area)
</div>
<div class="text-cursor">
Text Cursor (Editable Text Area)
</div>
<div class="move-cursor">
Move Cursor (Movable Element)
</div>
<div class="wait-cursor">
Wait Cursor (System Busy)
</div>
<div class="help-cursor">
Help Cursor (Help Available)
</div>
<div class="not-allowed-cursor">
Not Allowed Cursor (Action Not Allowed)
</div>
<div class="resize-cursor">
Resize Cursor (Diagonal Resize)
</div>
<div class="custom-cursor">
Custom Cursor (Example Image)
</div>
</div>
</body>
</html>