Cursor In CSS

The cursor for any element can be set by using the css propertycursor“.
CSS allows you to specify custom cursor that should appear when hovering over an element.
The normal default cursor icons are usually a skewed arrow, an “I” icon that appears when selecting text, and an hourglass.
Example 1:
<title>CSS Cursor example</title>
p { cursor: wait; }
h1 { cursor: help; }
h2 { cursor: crosshair; }
This cursor will show the “wait” icon when you hover over this paragraph.
This cursor will show the “help” icon when you hover over this heading.
This cursor will show the “crosshair” when you hover over this heading.
<h3>This cursor will show the “pointer” when you hover over this heading.</h3>


Example 2:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “”>
<HTML><HEAD><TITLE>css tutorial cursor</TITLE>
<P class=one style=”CURSOR: default”
alt=”CSS Tutorial Cursor Default Image”>
<IMG src=”img/fct-images-cursor-default.gif”>
style=”cursor: default;” </P>
<P class=one style=”CURSOR: hand”>
<IMG src=”img/fct-images-cursor-hand.gif”>
style=”cursor: hand;” </P>
<P class=one>Note: the “hand” cursor icon is not supported by Firefox, and will
instead appear as the default “text” cursor icon. </P>
<P class=one style=”CURSOR: pointer”>
<IMG src=”img/fct-images-cursor-hand.gif”>style=”cursor:
pointer;” </P>
<P class=one style=”CURSOR: hand”>
<IMG src=”img/fct-images-cursor-hand.gif”> style=”cursor:
pointer; cursor: hand;” </P>
<P class=one style=”CURSOR: crosshair”>
<IMG src=”img/fct-images-cursor-crosshair.gif”>
style=”cursor: crosshair;” </P>
<P class=one style=”CURSOR: text”>
<IMG src=”img/fct-images-cursor-text.gif”> style=”cursor:
text;” </P>
<P class=one style=”CURSOR: wait”>
<IMG src=”img/fct-images-cursor-hourglass.gif”>
style=”cursor: wait;” </P>
<P class=one style=”CURSOR: help”>
<IMG src=”img/fct-images-cursor-help.gif”> style=”cursor:
help;” </P>
<P class=one style=”CURSOR: move”>
<IMG src=”img/fct-images-cursor-move.gif”> style=”cursor:
move;” </P>
<P class=one style=”CURSOR: e-resize”>
<IMG src=”img/fct-images-cursor-e-resize.gif”>
style=”cursor: e-resize;” </P>
<P class=one style=”CURSOR: ne-resize”>
<IMG src=”img/fct-images-cursor-ne-resize.gif”>
style=”cursor: ne-resize;” </P>
<P class=one style=”CURSOR: nw-resize”>
<IMG src=”img/fct-images-cursor-nw-resize.gif”>
style=”cursor: nw-resize;” </P>
<P class=one style=”CURSOR: n-resize”>
<IMG src=”img/fct-images-cursor-n-resize.gif”>
style=”cursor: n-resize;” </P>
<P class=one style=”CURSOR: se-resize”>
<IMG src=”img/fct-images-cursor-se-resize.gif”>
style=”cursor: se-resize;” </P>
<P class=one style=”CURSOR: sw-resize”>
<IMG src=”img/fct-images-cursor-sw-resize.gif”>
style=”cursor: sw-resize;” </P>
<P class=one style=”CURSOR: w-resize”>
<IMG src=”img/fct-images-cursor-w-resize.gif”>
style=”cursor: w-resize;” </P>
<P class=one style=”CURSOR: progress”>
<IMG src=”img/fct-images-cursor-progress.gif”>
style=”cursor: progress;” </P>
<P class=one style=”CURSOR: all-scroll”>
<IMG src=”img/fct-images-cursor-all-scroll.gif”>
style=”cursor: all-scroll;” </P>
<P class=one style=”CURSOR: col-resize”>
<IMG src=”img/fct-images-cursor-col-resize.gif”>
style=”cursor: col-resize;” </P>
<P class=one style=”CURSOR: not-allowed”>
<IMG src=”img/fct-images-cursor-not-allowed.gif”>
style=”cursor: not-allowed;” </P>
<P class=one style=”CURSOR: no-drop”>
<IMG src=”img/fct-images-cursor-no-drop.gif”>
style=”cursor: no-drop;” </P>
<P class=one>Note: In Firefox, the “no-drop” cursor icon will appear as a
“not-allowed” cursor icon.

<P class=one style=”CURSOR: row-resize”>
<IMG src=”img/fct-images-cursor-row-resize.gif”>
style=”cursor: row-resize;” </P>
<P class=one style=”CURSOR: vertical-text”><IMG
style=”cursor: vertical-text;” </P></DIV></BODY>
Scroll to Top