Create a Website
HTML
Dreamweaver
CSS Tutorial
JavaScript
FREE Hosting!
With every domain name
you register at DotEasy
you get FREE (no-ad)
one year hosting.
PLUS you get:
  • FREE Website Builder
  • FREE Blog
  • FREE Forum
  • FREE Photo Album
  • FREE Email Accounts
Get your FREE hosting today!
Home > CSS Tutorial
$0 Web Hosting

The syntax for specifying a cursor property is:

selector {cursor: value;}

The most common values used for the cursor property:

LookValuesLookNSIEExample
cursor-sample
defaultTEST6+4+cursor:default
cursor-sample
crosshairTEST6+4+cursor:crosshair
cursor-sample
handTEST 4+cursor:hand
cursor-sample
pointerTEST6+ cursor:pointer
cursor-sample
Cross browserTEST 4+cursor:pointer;cursor:hand
cursor-sample
moveTEST6+4+cursor:move
cursor-sample
textTEST6+4+cursor:text
cursor-sample
waitTEST6+4+cursor:wait
cursor-sample
helpTEST6+4+cursor:help
cursor-sample
n-resizeTEST6+4+cursor:n-resize
cursor-sample
ne-resizeTEST6+4+cursor:ne-resize
cursor-sample
e-resizeTEST6+4+cursor:e-resize
cursor-sample
se-resizeTEST6+4+cursor:se-resize
cursor-sample
s-resizeTEST6+4+cursor:s-resize
cursor-sample
sw-resizeTEST6+4+cursor:sw-resize
cursor-sample
w-resizeTEST6+4+cursor:w-resize
cursor-sample
nw-resizeTEST4+4+cursor:nw-resize

cursor-sample
progressTEST 6+cursor:progress

cursor-sample
not-allowedTEST 6+cursor:not-allowed

cursor-sample
no-dropTEST 6+cursor:no-drop

cursor-sample
vertical-textTEST 6+cursor:vertical-text

cursor-sample
all-scrollTEST 6+cursor:all-scroll

cursor-sample
col-resizeTEST 6+cursor:col-resize

cursor-sample
row-resizeTEST 6+cursor:row-resize

cursor-sample
cursor:url(uri)TEST 6+cursor:url(uri)

Custom Cursors

Custom cursors are cursor files with a .cur (for static cursors) and .ani (for animated cursors) extension. Cursor files are small graphic files, usually 16x16, 32x32 or 48x48 pixels in size.

The syntax for adding a custom cursor is:

selector {cursor: url(path_to_file); }

Because not all browsers and operating systems support custom cursors, it is important to provide an alternative cursor. The syntax for providing an alternative cursor is:

selector {cursor: url(path_to_file), pointer; }

* Note: Custom cursors are support on Windows. On Macintosh, they are supported by Safari 3 but not FireFox 3.

Enjoy this tutorial?

1. Link to this page(copy/paste into your own website or blog):
2. Add this page to your favorite social bookmarks sites:
3. Add this page as your favorites. (Press Ctrl+D)