Styling mouse pointer using CSS

Last updated on December 15, 2009. Tags: , , ,

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.

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

Share and Enjoy:
  • Digg
  • del.icio.us
  • Facebook
  • Google
  • StumbleUpon
  • Technorati

Related Posts

You might also be interested (randomly generated):

Post Comments





Comment Rules and Reminders

  • The links to the commentator's e-mail do not have nofollow tag. However, I will be very strict in approving comments.
  • When you comment, please say something that indicates that you indeed read my post. If your comment is a general statement that can fit to any blog post about any topic, it will be regarded as spam.
  • What you write in the name field may include keywords to your website provided that (1) it's only up to four words long and (2) at least one of these four words is your first name or nickname. I rather reply to Bob or to Joe Smith than to Online Marketing Tips.
  • Please double check your comment before clicking the "Post" button. Once you clicked it, there will be no way for you to edit your comment.
  • Fields marked with asterisks (*) are required. Your email will never be displayed in public.