CSS Cursor

As you may well know, a cursor is the little pointer that moves around as you move your mouse around. You may also be aware that the cursor often changes its look, depending on what page element its hovering over. For example, if you hover over a hyperlink, the default behavior for cursors is to change into a pointer or a hand.

The CSS cursor property allows you to define the look of the cursor based on your own rules.

For example, you could make a CSS cursor change into a question mark when the user hovers over an element that displays a tooltip when clicked on. Another popular use of CSS cursors is forcing a pointer/hand to be displayed when hovering over a JavaScript "artificial" link. More specifically, a link that doesn't use the HTML <a> tag - such as some text with an onclick event handler. For this type of link, see JavaScript Links.

A word of caution. If not used carefully, CSS cursors have the ability to make drastically reduce usability of your website. Make sure that you only change the cursor when it really makes sense - like when building a custom interface using JavaScript or similar. Usually you'll find that HTML produces the most appropriate cursor for the occasion.

CSS Cursor Codes

Hover over each line of text below to see what the cursor looks like for that line.

Source Code

Result

<!-- Codes by HTMLcodes.me --> <p style="cursor: auto;">CSS Cursor: "auto"</p> <p style="cursor: crosshair;">CSS Cursor: "crosshair"</p> <p style="cursor: default;">CSS Cursor: "default"</p> <p style="cursor: hand;">CSS Cursor: "hand" (Internet Explorer)</p> <p style="cursor: pointer;">CSS Cursor: "pointer" (All other browsers, plus Internet Explorer 6)</p> <p style="cursor: pointer; cursor: hand;">CSS Cursor: "pointer" and "hand" (cross-browser)</p> <p style="cursor: move;">CSS Cursor: "move"</p> <p style="cursor: e-resize;">CSS Cursor: "e-resize"</p> <p style="cursor: ne-resize;">CSS Cursor: "ne-resize"</p> <p style="cursor: nw-resize;">CSS Cursor: "nw-resize"</p> <p style="cursor: n-resize;">CSS Cursor: "n-resize"</p> <p style="cursor: se-resize;">CSS Cursor: "se-resize"</p> <p style="cursor: sw-resize;">CSS Cursor: "sw-resize"</p> <p style="cursor: s-resize;">CSS Cursor: "s-resize"</p> <p style="cursor: w-resize;">CSS Cursor: "w-resize"</p> <p style="cursor: text;">CSS Cursor: "text"</p> <p style="cursor: wait;">CSS Cursor: "wait"</p> <p style="cursor: progress;">CSS Cursor: "progress"</p> <p style="cursor: help;">CSS Cursor: "help"</p> <p style="cursor: url(http://www.htmlcodes.me/images/links/cursor_move.gif),auto;">CSS Cursor: "url(cursor_move.gif),auto"</p> <p><a style="font-size:11px;color:#999;" href="http://www.htmlcodes.me/links/css-cursor.cfm">CSS cursor</a></p>

CSS Cursor: "auto" CSS Cursor: "crosshair" CSS Cursor: "default" CSS Cursor: "hand" (Internet Explorer) CSS Cursor: "pointer" (All other browsers, plus Internet Explorer 6) CSS Cursor: "pointer" and "hand" (cross-browser) CSS Cursor: "move" CSS Cursor: "e-resize" CSS Cursor: "ne-resize" CSS Cursor: "nw-resize" CSS Cursor: "n-resize" CSS Cursor: "se-resize" CSS Cursor: "sw-resize" CSS Cursor: "s-resize" CSS Cursor: "w-resize" CSS Cursor: "text" CSS Cursor: "wait" CSS Cursor: "progress" CSS Cursor: "help" CSS Cursor: "url(cursor_move.gif),auto"