A look at the CSS Cursor Property

Written by on December 9, 2009 in CSS - 1 Comment
cursor

Recently I was setting up CSS styles for a navigation. One thing I do a lot is change the cursor type with CSS for the link of the current page. So if you are on the About page and you roll over the About link, your cursor will be the default arrow, not the hand pointing the finger which indicates a link. Sure it’s still a link, but I feel this helps distinguish the page you are currently on a little bit further than just changing the color of the current page link.

As I was doing this styling I realized that there are actually quite a number of different cursor types that can be set with the CSS cursor property. Keep reading to see the examples and code for each.

Below are the different cursor types. The CSS property is written like this: cursor:crosshair Just change “crosshair” with whatever you want the users cursor to do on hover.

Roll your cursor over the examples below to see the different cursor types available.

cursor: auto

cursor: crosshair

cursor:default

cursor: help

cursor: pointer

cursor: wait

cursor: progress

cursor: text

cursor: vertical-text

cursor: alias

cursor: copy

cursor: move

cursor: no-drop

cursor: not-allowed

cursor: context-menu

cursor: cell

cursor: col-resize

cursor: row-resize

cursor: all-scroll

cursor: e-resize

cursor: n-resize

cursor: ne-resize

cursor: nw-resize

cursor: s-resize

cursor: se-resize

cursor: sw-resize

cursor: w-resize

cursor: ew-resize

cursor: ns-resize

cursor: nesw-resize

cursor: nwse-resize

About the Author

Mike Ilsley "ilz" is a Boston based website designer, front-end developer, WordPress addict, owner of Beantown Design, and exclusive ThemeForest author. Check him out on Twitter, Facebook, Google+ and don't forget to subscribe to the WebDesign&Such email RSS feed. Also, check out his latest project, jQueryMobileShowcase.com.