The cursor property sets the appearance
of the cursor when hovering over an element.
Syntax
cssselector {
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.