The cursor property is used to specify the mouse cursor to be displayed while pointing on an element. This property is defined with zero or more <url> values that are separated by commas followed by 1 keyword value as mandatory & each <url> will point to the image file.
Syntax:
cursor: value;
Property Values:
- auto: This is the default property where the browser sets a cursor.
- alias: This property is used to display the cursor’s indication of something is to be created.
- all-scroll: In this property, the cursor indicates scrolling.
- cell: In this property, the cursor indicates a cell or set of cells are selected.
- context-menu: In this property, the cursor indicates that a context menu is available.
- col-resize: In this property, the cursor indicates that the column can be resized horizontally.
- copy: In this property, the cursor indicates something is to be copied.
- crosshair: In this property, the cursor renders as a crosshair.
- default: The default cursor.
- e-resize: In this property, the cursor indicates an edge of a box is to be moved to the right.
- ew-resize: In this property, the cursor indicates a bidirectional resize cursor.
- help: In this property, the cursor indicates that help is available.
- move: In this property, the cursor indicates something is to be moved
- n-resize: In this property, the cursor indicates an edge of a box is to be moved up.
- ne-resize: In this property, the cursor indicates an edge of a box is to be moved up and right.
- nesw-resize: This property indicates a bidirectional resize cursor.
- ns-resize: This property indicates a bidirectional resize cursor.
- nw-resize: In this property, the cursor indicates an edge of a box is to be moved up and left.
- nwse-resize: This property indicates a bidirectional resize cursor.
- no-drop: In this property, the cursor indicates that the dragged item cannot be dropped here.
- none: This property indicates no cursor is rendered for the element.
- not-allowed: In this property, the cursor indicates that the requested action will not be executed.
- pointer: In this property, the cursor is a pointer and indicates link
- progress: In this property, the cursor indicates that the program is busy.
- row-resize: In this property, the cursor indicates that the row can be resized vertically.
- s-resize: In this property, the cursor indicates an edge of a box is to be moved down.
- se-resize: In this property, the cursor indicates an edge of a box is to be moved down and right.
- sw-resize: In this property, the cursor indicates an edge of a box is to be moved down and left.
- text: In this property, the cursor indicates text that may be selected.
- URL: In this property a comma-separated list of URLs to custom cursors and a generic cursor at the end of the list.
- vertical-text: In this property, the cursor indicates vertical-text that may be selected.
- w-resize: In this property, the cursor indicates an edge of a box is to be moved left.
- wait: In this property, the cursor indicates that the program is busy.
- zoom-in: In this property, the cursor indicates that something can be zoomed in.
- zoom-out: In this property, the cursor indicates that something can be zoomed out.
- initial: This property is used to set to its default value.
- inherit: Inherits from its parent element.
Example: This example illustrates the use of the cursor property & its value is set to wait which indicates that the program is busy.
HTML
<!DOCTYPE html>
<html>
<head>
<title> CSS | cursor property </title>
<style>
.wait {
cursor: wait;
}
h1 {
color: green;
}
</style>
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<p>Mouse over the words to change the mouse cursor.</p>
<p class="wait">wait</p>
</center>
</body>
</html>
|
Output:
Supported Browsers:
- Google Chrome 1.0
- Microsoft Edge 12.0
- Mozilla Firefox 1.0
- IE 4.0
- Opera 7.0
- Safari1.2
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!
Last Updated :
11 Oct, 2021
Like Article
Save Article