Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
Cursor property of CSS
The cursor property of CSS allows you to specify the type of cursor that should be displayed to the user when they hover over an element.
Syntax
selector {
cursor: value;
}
Possible Values
| Value | Description |
|---|---|
auto |
Browser determines the cursor to display based on context |
default |
Default cursor (usually an arrow) |
pointer |
Hand cursor (typically for clickable elements) |
crosshair |
Crosshair cursor |
text |
Text selection cursor (I-beam) |
wait |
Loading/wait cursor |
not-allowed |
Cursor indicating something is not allowed |
Example: Basic Cursor Types
The following example demonstrates different cursor types when hovering over elements −
<!DOCTYPE html>
<html>
<head>
<style>
.cursor-demo {
padding: 10px;
margin: 5px;
background-color: #f0f0f0;
border: 1px solid #ccc;
border-radius: 5px;
text-align: center;
font-family: Arial, sans-serif;
}
.auto { cursor: auto; }
.default { cursor: default; }
.pointer { cursor: pointer; }
.crosshair { cursor: crosshair; }
.text { cursor: text; }
.wait { cursor: wait; }
</style>
</head>
<body>
<p>Move the mouse over the boxes to see different cursor types:</p>
<div class="cursor-demo auto">Auto Cursor</div>
<div class="cursor-demo default">Default Cursor</div>
<div class="cursor-demo pointer">Pointer Cursor</div>
<div class="cursor-demo crosshair">Crosshair Cursor</div>
<div class="cursor-demo text">Text Cursor</div>
<div class="cursor-demo wait">Wait Cursor</div>
</body>
</html>
Six styled boxes appear on the page. When you hover over each box, the cursor changes to match the specified type: auto, default arrow, hand pointer, crosshair, text I-beam, and loading cursor respectively.
Example: Custom Cursor Image
You can also use custom cursor images with the cursor property −
<!DOCTYPE html>
<html>
<head>
<style>
.custom-cursor {
width: 200px;
height: 100px;
background-color: #e74c3c;
color: white;
display: flex;
align-items: center;
justify-content: center;
cursor: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"><circle cx="10" cy="10" r="8" fill="red"/></svg>'), auto;
border-radius: 10px;
font-family: Arial, sans-serif;
}
</style>
</head>
<body>
<div class="custom-cursor">Hover for Custom Cursor</div>
</body>
</html>
A red box with white text appears. When you hover over it, the cursor changes to a small red circle instead of the default cursor.
Conclusion
The cursor property enhances user experience by providing visual feedback about interactive elements. Use pointer for clickable items, text for editable content, and other values to match the element's functionality.
Updated on: 2026-03-15T11:20:22+05:30
125 Views
Advertisements