Wednesday, October 13, 2010

Custom Cursors

When the user mouse over an element on the page, the mouse cursor changes to indicate what the user can (or cannot) do with that element.

The syntax for specifying a cursor property is shown below:
selector { cursor: value; }
The cursor for any element can be set by using the css property "cursor".

Example Tag:
<div style="cursor: move;"> this is a move type cursor </div>

This result in:
this is a move type cursor

The table below shows the most common values used for the cursor property.
texttext symbol
pointera hand symbol
waitloading symbol
helpquestion symbol
movemove symbol
crosshair+ symbol
ne-resizemove north-east cursor
w-resizemove west cursor
n-resizemove north cursor
nw-resizemove north-west cursor
sw-resizemove south-west cursor
se-resizemove south-east cursor
e-resizemove east cursor
s-resizemove south cursor
urluser defined image as cursor
defaultdefault cursor

No comments:

Post a Comment