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:
div{
background-color : #e1e1e1;
padding : 5px;
margin-bottom:10px;
}
.crosshair{
cursor: crosshair;
}
.pointer{
cursor: pointer;
}
.move{
cursor: move;
}
.wait{
cursor: wait;
}
.progress{
cursor: progress;
}
.help{
cursor: help;
}Output Explanation:
Respective cursors are displayed while hovering over the elements.
