Things you didn't know about CSS Cursors
CSS which means Cascading Style Sheet is on a different level in its own world of wonders - You know why ???
It isn't a programming language (oops! or is it?),
It is cumbersome. (CSS has 520 properties and still counting). See all the CSS properties listed here: w3.org
- Big websites that teaches it only teach a fragment of it all. For example, css-tricks.com only lists 176 whereas w3schools.com only lists 228.
What you probably didn't know about CSS Cursors
- Definition
The cursor property in CSS controls what the mouse cursor will look like when it is located over the element in which this property is set.
The cursor property is good for telling users the state of the application or site they are using at the moment (only on computers)
The syntax is cursor: value
example:
/** You are sure familiar with this one**/
.help { cursor: pointer; }
View live examples on my codepen
- Size of values
Did you know that CSS cursor has 39 real values?
The different Cursor values are as follows
| Property | Description |
| 1. alias | The cursor indicates an alias of something is to be created |
| 2. all-scroll | The cursor indicates that something can be scrolled in any direction |
| 3. auto | Default. The browser sets a cursor |
| 4. cell | The cursor indicates that a cell (or set of cells) may be selected |
| 5. context-menu | The cursor indicates that a context-menu is available |
| 6. col-resize | The cursor indicates that the column can be resized horizontally |
| 7. copy | The cursor indicates something is to be copied |
| 8. crosshair | The cursor render as a crosshair |
| 9. default | The default cursor |
| 10. e-resize | The cursor indicates that an edge of a box is to be moved right (east) |
| 11. ew-resize | Indicates a bidirectional resize cursor |
| 12. grab | The cursor indicates that something can be grabbed |
| 13. grabbing | The cursor indicates that something can be grabbed |
| 14. help | The cursor indicates that help is available |
| 15. move | The cursor indicates something is to be moved |
| 16. n-resize | The cursor indicates that an edge of a box is to be moved up (north) |
| 17. ne-resize | The cursor indicates that an edge of a box is to be moved up and right (north/east) |
| 18. nesw-resize | Indicates a bidirectional resize cursor |
| 19. ns-resize | Indicates a bidirectional resize cursor |
| 20. nw-resize | The cursor indicates that an edge of a box is to be moved up and left (north/west) |
| 21. nwse-resize | Indicates a bidirectional resize cursor |
| 22. no-drop | The cursor indicates that the dragged item cannot be dropped here |
| 23. none | No cursor is rendered for the element |
| 24. not-allowed | The cursor indicates that the requested action will not be executed |
| 25. pointer | The cursor is a pointer and indicates a link |
| 26. progress | The cursor indicates that the program is busy (in progress) |
| 27. row-resize | The cursor indicates that the row can be resized vertically |
| 28. s-resize | The cursor indicates that an edge of a box is to be moved down (south) |
| 29. se-resize | The cursor indicates that an edge of a box is to be moved down and right (south/east) |
| 30. sw-resize | The cursor indicates that an edge of a box is to be moved down and left (south/west) |
| 31. text | The cursor indicates text that may be selected |
| 32. URL | A comma separated list of URLs to custom cursors. Note: Always specify a generic cursor at the end of the list, in case none of the URL-defined cursors can be used e.g |
| 33. vertical-text | The cursor indicates vertical-text that may be selected |
| 34. w-resize | The cursor indicates that an edge of a box is to be moved left (west) |
| 35. wait | The cursor indicates that the program is busy |
| 36. zoom-in | The cursor indicates that something can be zoomed in |
| 37. zoom-out | The cursor indicates that something can be zoomed out |
| 38. initial | Sets this property to its default value |
| 39. inherit | Inherits this property from its parent element |
- Cursors enhance user's experience on your site.
Checkout the chart with browser compactability here
You can also View examples on codepen
ps: make sure that you are viewing the examples on a computer to see the different cursors
If you found this article helpful, kindly give me a follow on twitter Bonaventure Chukwudi and stay tuned for more articles.