Introduction to the CSS cursor property
CSS cursor property introduction
In CSS, the cursor property is used to set the style displayed when the mouse pointer moves over a specific element. By using different cursor values, we can change the appearance of the mouse pointer to enhance the user experience.
Basic syntax
The basic syntax of
cursor attribute is as follows:
selector {
cursor: value;
}
Where selector represents the element selector to which the style is applied, and value represents the value of cursor. The different values and their effects are described below.
Available Values
auto
Default value. The default cursor set by the browser, usually an arrow.
div {
cursor: auto;
}
pointer
Indicates a clickable link or button. Usually a hand icon.
a {
cursor: pointer;
}
crosshair
Crosshair cursor, used for drawing graphics.
canvas {
cursor: crosshair;
}
move
Indicates a movable element.
.draggable {
cursor: move;
}
text
Indicates that text is selectable.
p {
cursor: text;
}
not-allowed
Indicates that an operation is not allowed, such as disabling a button.
.disabled {
cursor: not-allowed;
}
help
Indicates help information.
question {
cursor: help;
}
progress
Indicates the status of program execution, such as a progress bar.
loading {
cursor: progress;
}
zoom-in
Indicates that zooming is possible.
img {
cursor: zoom-in;
}
zoom-out
Indicates that you can zoom out.
img {
cursor: zoom-out;
}
Advanced Properties
url()
The url() function allows you to customize the mouse pointer icon.
.custom-cursor {
cursor: url('custom-cursor.png'), auto;
}
grab
Indicates a grabbable element, meaning it can be dragged.
.draggable {
cursor: grab;
}
grabbing
Indicates the state of an element being grabbed.
.dragging {
cursor: grabbing;
}
Other Notes
- PC and mobile devices have different support for the
cursorattribute. Some values may be invalid on mobile devices. - When using custom cursor styles, ensure the usability of the cursor icon and ensure a good user experience.
When designing web pages, the cursor attribute is very useful. You can set different cursor styles based on the different functions and states of an element to improve the user experience.