Webmaster tips » CSS

May 2, 2006

Specify mouse cursors with CSS

Average rating:
  • 2.6 out of 5 Stars
Rate this article
CSS allows you to define a cursor that will be displayed at the specific element on your page. For instance, if you want to show that the clicking the element will show the context help, you can define the "help" cursor for this element.

Here are the list of cursor types you can use for the pointing device (usually, mouse). You can test each cursor by moving mouse pointer above the "Example" block:

auto
Initial value. The browser determines the cursor to display based on the current context. (I.e. above the text it will be "text“ cursor, above the hyperlink it will be the ”pointer", and so on.)

Example of the auto cursor

crosshair
A simple crosshair (e.g., short line segments resembling a "+" sign).

Example of the crosshair cursor

default
The platform-dependent default cursor. Often rendered as an arrow.

Example of the default cursor

pointer
The cursor is a pointer that indicates a link.

Example of the pointer cursor

move
Indicates something is to be moved.

Example of the move cursor

e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize
Indicate that some edge is to be moved. For example, the 'se-resize' cursor is used when the movement starts from the south-east corner of the box.

nw-resize n-resize ne-resize
w-resize   e-resize
sw-resize s-resize se-resize
text
Indicates text that may be selected. Often rendered as an I-bar.

Example of the text cursor

wait
Indicates that the program is busy and the user should wait. Often rendered as a watch or hourglass.

Example of the wait cursor

help
Help is available for the object under the cursor. Often rendered as a question mark or a balloon.

Example of the help cursor

url
The user agent retrieves the cursor from the resource designated by the URI. If the user agent cannot handle the first cursor of a list of cursors, it should attempt to handle the second, etc. If the user agent cannot handle any user-defined cursor, it must use the generic cursor at the end of the list.

Example of the (url) cursor

Print! Print this article   Bookmark:

Rate This Article
How would you rate the quality of this content? Currently rated: 2.6 out of 5 stars. 3 people have rated this article.
Use your mouse pointer to select as many stars as you want, and press the left mouse button to vote.
  • 2.6 out of 5 Stars
  • 1
  • 2
  • 3
  • 4
  • 5
Other CSS Articles