A look at the CSS Cursor Property

ilz

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

Share and Enjoy:
  • Digg
  • del.icio.us
  • Facebook
  • Mixx
  • Google Bookmarks
  • BlinkList
  • MisterWong
  • Reddit
  • Add to favorites
  • StumbleUpon
  • Technorati
  • Twitter

Leave a Reply

Spam Protection by WP-SpamFree

Get Adobe Flash playerPlugin by wpburn.com wordpress themes