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
Changing the look of Cursor using CSS
The CSS cursor property allows you to change the appearance of the mouse cursor when it hovers over specific elements. This property enhances user experience by providing visual feedback about interactive elements and their functionality.
Syntax
selector {
cursor: value;
}
Possible Values
| Value | Description |
|---|---|
| auto | Browser sets the cursor automatically (default) |
| pointer | Hand pointer, indicates a link |
| text | I-beam cursor, indicates selectable text |
| move | Four-arrow cursor, indicates moveable element |
| not-allowed | Crossed circle, indicates prohibited action |
| grab/grabbing | Open/closed hand, indicates grabbable element |
| crosshair | Cross cursor for precise selection |
| help | Question mark cursor, indicates help available |
| wait | Hourglass/spinner, indicates loading |
| resize cursors | n-resize, s-resize, e-resize, w-resize, etc. |
Example: Common Cursor Types
This example demonstrates the most commonly used cursor types −
<!DOCTYPE html>
<html>
<head>
<style>
.cursor-demo {
display: inline-block;
padding: 10px 15px;
margin: 10px;
background-color: #f0f0f0;
border: 2px solid #ccc;
border-radius: 5px;
}
.pointer { cursor: pointer; }
.text { cursor: text; }
.move { cursor: move; }
.not-allowed { cursor: not-allowed; }
.help { cursor: help; }
</style>
</head>
<body>
<h2>Hover over each box to see different cursors</h2>
<div class="cursor-demo pointer">Pointer (Link)</div>
<div class="cursor-demo text">Text (Select)</div>
<div class="cursor-demo move">Move (Drag)</div>
<div class="cursor-demo not-allowed">Not Allowed</div>
<div class="cursor-demo help">Help (Info)</div>
</body>
</html>
Five boxes appear with different background colors. When you hover over each box, the cursor changes to match the label: hand pointer, text I-beam, four-way move arrow, prohibited symbol, and help cursor respectively.
Example: Resize Cursors
This example shows various resize cursors used for resizable elements −
<!DOCTYPE html>
<html>
<head>
<style>
.resize-box {
width: 100px;
height: 60px;
background-color: #4CAF50;
color: white;
display: inline-flex;
align-items: center;
justify-content: center;
margin: 10px;
border-radius: 5px;
font-size: 12px;
}
.n-resize { cursor: n-resize; }
.s-resize { cursor: s-resize; }
.e-resize { cursor: e-resize; }
.w-resize { cursor: w-resize; }
.nw-resize { cursor: nw-resize; }
.ne-resize { cursor: ne-resize; }
</style>
</head>
<body>
<h2>Resize Cursors</h2>
<div class="resize-box n-resize">North</div>
<div class="resize-box ne-resize">North-East</div>
<div class="resize-box e-resize">East</div>
<div class="resize-box s-resize">South</div>
<div class="resize-box w-resize">West</div>
<div class="resize-box nw-resize">North-West</div>
</body>
</html>
Six green boxes display with white text. Hovering over each box shows different resize cursors: vertical arrows, horizontal arrows, and diagonal arrows pointing in the directions indicated by the box labels.
Example: Interactive States
This example demonstrates cursors for different interaction states −
<!DOCTYPE html>
<html>
<head>
<style>
.state-demo {
padding: 15px;
margin: 10px 0;
border-radius: 5px;
font-weight: bold;
}
.loading {
background-color: #FFC107;
cursor: wait;
}
.disabled {
background-color: #e0e0e0;
color: #666;
cursor: not-allowed;
}
.interactive {
background-color: #2196F3;
color: white;
cursor: pointer;
}
.interactive:hover {
background-color: #1976D2;
}
</style>
</head>
<body>
<div class="state-demo loading">Loading... (wait cursor)</div>
<div class="state-demo disabled">Disabled Button (not-allowed cursor)</div>
<div class="state-demo interactive">Click Me! (pointer cursor)</div>
</body>
</html>
Three styled div elements appear: a yellow "Loading" box with a wait cursor, a gray "Disabled" box with a not-allowed cursor, and a blue interactive button with a pointer cursor that darkens on hover.
Conclusion
The CSS cursor property is essential for creating intuitive user interfaces. It provides immediate visual feedback about element functionality and significantly improves user experience when applied thoughtfully.
Updated on: 2026-03-15T13:52:46+05:30
260 Views
Advertisements