When it comes to setting the type of cursor we mostly use pointer eg.
.btn:hover{
cursor: pointer;
}
But there are so many more types to cursor available to use. So let's explore the most useful ones.
-
all-scroll
When you want to indicate that user can scroll on all direction you can use
cursor: all-scroll
. -
cell
When a user in hovering on a button that is used to add a cell(spreadsheet for example) you can use
cursor: cell
. -
col-resize
If a colum(div) is resizable you can use
cursor: col-resize
to indicate that. -
crosshair
If you want the cursor you turn into a plus icon you can use
cursor: crosshair
. -
grabbing
If you want the cursor you turn into a hand icon you can use
cursor: grabbing
. -
help
Lets say use if hovering on a info button or link, in such case you can use
cursor: help
. -
no-drop
To indicate that user is not allowed to drop file/element here you can use
cursor: no-drop
. -
progress
To indicate that something is loading/in-progress you can use
cursor: progress
. -
text
To indicate that user is hovering on text/input you can use
cursor: text
. -
pointer
To indicate the user is hovering on a clickable element you can use
cursor: pointer
. ### You can visit this link to get a list of all available cursor types.
Top comments (2)
And BTW use this method
instead of
That also works
I personally prefer a:hover because it better explain what happens