The cursor property sets the appearance
of the cursor when hovering over an element.
Syntax
selector {
cursor: value;
}
Comment
The property has many values. I have grouped
these values below to make it easier to
navigate. The appearance of the cursor differs
in different browsers, so I did not take
photos of the cursors, but simply made a
special column in the tables with values,
hovering over the cell of which you can
see the appearance of the described cursor.
Values
| Value |
Description |
Appearance |
default |
Standard arrow pointer appearance.
|
|
pointer |
Used to indicate that the element is active
and clickable (this is the default for links).
|
|
help |
Used to show that there is some
help or question associated with
an element.
|
|
not-allowed |
Used to show that an operation is invalid.
|
|
Text
| Value |
Description |
Appearance |
text |
Standard text cursor in the form of a vertical stick.
|
|
vertical-text |
Text cursor for vertical text.
|
|
Waiting
| Value |
Description |
Appearance |
progress |
Used to indicate that some operation is
in progress and the user needs to wait.
|
|
wait |
Used to indicate that the user needs to wait.
|
|
Resizing
When changing the size of an element, the property
value is formed as follows: the word resize,
and before it, separated by a hyphen, some letter
or several letters, for example: n-resize
or ne-resize.
These letters are the first letters of the
cardinal points: north, south, east,
west. In this case, the conventions adopted
for terrain maps are used: north at the top,
south at the bottom, west on the left, east
on the right. Of course, this is confusing,
but you have to use it as intended :)
So here are the values:
| Value |
Direction |
Point |
Appearance |
n-resize |
top |
north |
|
ne-resize |
right top |
north east |
|
e-resize |
right |
east |
|
se-resize |
right bottom |
south east |
|
s-resize |
bottom |
south |
|
sw-resize |
left bottom |
south west |
|
w-resize |
left |
west |
|
nw-resize |
left top |
nord west |
|
nesw-resize |
right top and left bottom |
nord east - south west |
|
nwse-resize |
left top and right bottom |
nord west - south east |
|
Resizing two elements
| Value |
Description |
Appearance |
col-resize |
Horizontal resizing. |
|
row-resize |
Vertical resizing. |
|
Changing a zoom
| Value |
Description |
Appearance |
zoom-in |
Zoom in. |
|
zoom-out |
Zoom out. |
|
Movement
| Value |
Description |
Appearance |
move |
Used to show that an element can be moved,
or when it is being moved.
|
|
all-scroll |
Used to indicate that an element is
scrollable by the mouse in all
directions.
|
|
Miscellaneous
| Value |
Description |
Appearance |
crosshair |
Crosshair cursor.
|
|
cell |
Crosshair cursor.
|
|