Bonaventure Chukwudi
Bonarhyme

Bonarhyme

Things you didn't know about CSS Cursors

Things you didn't know about CSS Cursors

Bonaventure Chukwudi's photo
Bonaventure Chukwudi

Published on Dec 22, 2020

7 min read

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

PropertyDescription
1. aliasThe cursor indicates an alias of something is to be created
2. all-scrollThe cursor indicates that something can be scrolled in any direction
3. autoDefault. The browser sets a cursor
4. cellThe cursor indicates that a cell (or set of cells) may be selected
5. context-menuThe cursor indicates that a context-menu is available
6. col-resizeThe cursor indicates that the column can be resized horizontally
7. copyThe cursor indicates something is to be copied
8. crosshairThe cursor render as a crosshair
9. defaultThe default cursor
10. e-resizeThe cursor indicates that an edge of a box is to be moved right (east)
11. ew-resizeIndicates a bidirectional resize cursor
12. grabThe cursor indicates that something can be grabbed
13. grabbingThe cursor indicates that something can be grabbed
14. helpThe cursor indicates that help is available
15. moveThe cursor indicates something is to be moved
16. n-resizeThe cursor indicates that an edge of a box is to be moved up (north)
17. ne-resizeThe cursor indicates that an edge of a box is to be moved up and right (north/east)
18. nesw-resizeIndicates a bidirectional resize cursor
19. ns-resizeIndicates a bidirectional resize cursor
20. nw-resizeThe cursor indicates that an edge of a box is to be moved up and left (north/west)
21. nwse-resizeIndicates a bidirectional resize cursor
22. no-dropThe cursor indicates that the dragged item cannot be dropped here
23. noneNo cursor is rendered for the element
24. not-allowedThe cursor indicates that the requested action will not be executed
25. pointerThe cursor is a pointer and indicates a link
26. progressThe cursor indicates that the program is busy (in progress)
27. row-resizeThe cursor indicates that the row can be resized vertically
28. s-resizeThe cursor indicates that an edge of a box is to be moved down (south)
29. se-resizeThe cursor indicates that an edge of a box is to be moved down and right (south/east)
30. sw-resizeThe cursor indicates that an edge of a box is to be moved down and left (south/west)
31. textThe cursor indicates text that may be selected
32. URLA 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-textThe cursor indicates vertical-text that may be selected
34. w-resizeThe cursor indicates that an edge of a box is to be moved left (west)
35. waitThe cursor indicates that the program is busy
36. zoom-inThe cursor indicates that something can be zoomed in
37. zoom-outThe cursor indicates that something can be zoomed out
38. initialSets this property to its default value
39. inheritInherits 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.

 
Share this