CSS cursor / mouse pointer

Styling mouse pointer using CSS

Last updated on December 15, 2009. Tags: block elements, cross browser compatibility, link hover, mouse pointer

This trick allows you to setup the mouse pointer (a.k.a. mouse cursor) to any part or block elements of a web page. All you need to do is to setup the CSS code that dictates the mouse type to whatever part, inline element or block element.

For example, you can setup the cursor for links using the following CSS codes:

a {cursor: crosshair;}

In the above code, you can change the mouse pointer that hovers on the link into a crosshair, something like this when you hover your mouse pointer on this text. You can place it in the CSS in the header section, in an external CSS file or in an inline style attribute (just like what we did in the italicized text in this paragraph).

You can also implement it in several different inline elements and block elements such as paragraph <p>, list <ul> or <ol>, item list <li>, as well as IDs and classes. The page in the iframe below implements different mouse pointers in paragraph, list items and block elements defined by a class and an ID.

<a href="../samples/egmouse1.htm"><b>Mouse cursor example</b>: click here if your browser does not support iframe.</a>

The CSS for the page in the iframe above is shown below. The code that determines the mouse pointer type is in bold face:

/*elements*/
p {cursor: help; clear: both;}
li {cursor: move; clear: both; }

/*class*/
.leftblock {cursor: wait; width: 200px; margin: 5px; border: 1px solid #0000ff; float: left;}

/*ID*/
#rightblock {cursor: pointer; width: 200px; margin: 5px; border: 1px solid #ff0000; float: left;}

Below are the possible different values of cursor CSS attribute. Hover your mouse pointer on the list item to see how each of them looks like.

cursor: auto; - whatever pointer is set as the user
cursor: default; - white arrow; the usual mouse pointer
cursor: pointer; - the hand that usually appear in links by default
cursor: hand; - same as pointer; working only in Internet Explorer (IE)
cursor: crosshair; - a thin crosshair
cursor: move; - a thick cross with arrows
cursor: e-resize; - horizontal line with arrows at both ends
cursor: w-resize; - same as cursor: e-resize; above
cursor: n-resize; - vertical line with arrows at both ends
cursor: s-resize; - same as cursor: n-resize; above
cursor: ne-resize; - oblique line from top-right to bottom-left with arrows at both ends
cursor: sw-resize; - same as cursor: ne-resize; above
cursor: nw-resize; - oblique line from bottom-right to top-left with arrows at both ends
cursor: se-resize; - same as cursor: nw-resize; above
cursor: help; - an arrow with question mark
cursor: text; - thin vertical line with bars on top that is usually seen whenever the mouse hovers above non-link text
cursor: wait; - an hour glass
cursor: not-allowed; - a circle with slash
cursor: no-drop; - a hand alongside a smaller circle with slash (works only in IE, the pointer is like the one in not-allowed if viewed in Firefox, Safari and Chrome)
cursor: vertical-text; - similar to text but it is vertical (displayed in a different way in Safari)
all-scroll - a circle surrounded by arrows (works only in IE, shows a pointer similar to cursor: move; in Firefox, Safari and Chrome)
cursor: col-resize; - two vertical lines with arrows pointing left and right (works in IE, Firefox and Chrome but Safari shows e-resize instead)
cursor: row-resize; - two horizontal lines with arrows pointing up and down (works in IE, Firefox and Chrome but Safari displays it similar to n-resize)

There is actually another value of cursor attribute not included in the list: it is cursor: url(); which is used if you intend to have a unique mouse pointer that you created or downloaded (the extension file is either .cur or .ani). It was covered in this article: Using customized mouse pointer on your webpage.

Posted by Greten on April 29, 2009 under Cascading Stylesheet (CSS)

Share and Enjoy: