CSS Cursor


This property is used to specify the type of cursor displayed for the pointing device.

Applicable Values:

auto – The UA determines the cursor to display based on the current context.

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

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

pointer – The cursor is a pointer that indicates a link.

move – Indicates something is to be moved.

text – Indicates text that may be selected. Often rendered as an I-beam.

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

progress – A progress indicator. The program is performing some processing, but is different from ‘wait’ in that the user may still interact with the program. Often rendered as a spinning beach ball, or an arrow with a watch or hourglass.

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

HTML snippet:

<div><h3>Hover your mouse over the elements to see different cursor styles</h3></div>
<div class="crosshair"><b>Cross-hair cursor</b> will be displayed</div>
<div class="pointer"><b>Pointer cursor</b> will be displayed</div>
<div class="move"><b>Move cursor</b> will be displayed</div>
<div class="wait"><b>Wait cursor</b> will be displayed</div>
<div class="progress"><b>Progress indicator</b> will be displayed</div>
<div class="help"><b>Help cursor</b> will be displayed</div>

CSS snippet:

background-color : #e1e1e1;
padding : 5px;
cursor: crosshair;
cursor: pointer;
cursor: move;

cursor: wait;
cursor: progress;
cursor: help;

Output Explanation:

Respective cursors are displayed while hovering over the elements.

Posted on July 22, 2014 in CSS

Share the Story

Leave a reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Back to Top