The CSS Cursor Property

by kirupa   |   6 September 2012

  Have questions? Discuss this Web Development tutorial with others on the forums.

Your operating system and by extension your browser comes with a variety of mouse cursors to help inform you about what is going on. The classic arrow is what you will see most of the time, but depending on what you are doing, that cursor may change to something else:

before and after

Normally, this transition from one cursor to another is done automatically for you. For example, when you hover over a normal link, your mouse cursor will automatically change to that of the pointer without you having to do anything extra.

With custom UIs often involving JavaScript generated visuals, your browser no longer has as easy of a time in figuring out when to switch from one cursor to another. That is unfortunate because your users often rely on the cursor changing to indicate what to do or what can be done. In these cases, the responsibility for displaying the right cursor falls on you.

That is where this tutorial comes in. In this tutorial, you will learn how to work with the CSS cursor property to specify which cursor to show.

The Cursor CSS Property

Inside a style declaration, you can declare your cursor CSS property and specify the exact cursor you would like to use. The following is a simple example that shows the cursor property at work:

.button:hover {
	cursor: pointer;
	background-color: #111;
}

There are a lot of values you can specify for the cursor property! To help you out, the following table lists all of the cursor property values along with what the resulting cursor looks like:

Mugshot CSS Value
cursor: context-menu;
cursor: help;
cursor: pointer;
cursor: hand;
cursor: progress;
cursor: wait;
cursor: cell;
cursor: crosshair;
cursor: text;
cursor: vertical-text;
cursor: alias;
cursor: copy;
cursor: move;
cursor: no-drop;
cursor: not-allowed;
cursor: e-resize;
cursor: n-resize;
cursor: ne-resize;
cursor: nw-resize;
cursor: s-resize;
cursor: se-resize;
cursor: sw-resize;
cursor: w-resize;
cursor: ew-resize;
cursor: ns-resize;
cursor: nesw-resize;
cursor: nwse-resize;
cursor: col-resize;
cursor: row-resize;
cursor: all-scroll;

I am not going to talk about custom CSS cursors in this article because I am not sure why anybody would want to use them. Or to put it differently, I don't think anybody should use a custom cursor that overrides a user's default choice. If you all really want to a tutorial on it, just let me know and I"ll add it to my queue.

Setting the Cursor via JavaScript

The last thing we will talk about is setting the cursor using JavaScript. This is pretty simple:

element.style.cursor = 'pointer';

 You set the cursor property on the style object that lives on pretty much every DOM element. In this snippet, the element references a DOM element you get a reference via something like getElementById. (See Finding HTML Elements using JS for more details.)

Note: Cursor Appearance

The default appearance of the cursors is dependent on your OS and browser. For example, the look of the cursors is slightly different when viewed in IE10 as opposed to Firefox.

Getting Help

If you have questions, need some assistance on this topic, or just want to chat - post in the comments below or drop by our friendly forums (where you have a lot more formatting options) and post your question. There are a lot of knowledgeable and witty people who would be happy to help you out

Share

Did you enjoy reading this and found it useful? If so, please share it with your friends:

If you didn't like it, I always like to hear how I can do better next time. Please feel free to contact me directly via e-mail, facebook, or twitter.

Kirupa Chinnathambi
I like to talk a lot - A WHOLE LOT. When I'm not talking, I've been known to write the occasional English word. You can learn more about me by going here.

Add Your Comment (or post on the Forums)

blog comments powered by Disqus

Awesome and high-performance web hosting!
BACK TO TOP
new books - yay!!!