| The cursor for any element can be set by using the css property “cursor“. |
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: |
<html>
<head>
<title>CSS Cursor example</title>
<style>
p { cursor: wait; }
h1 { cursor: help; }
h2 { cursor: crosshair; }
h3{cursor:pointer}
</style>
</head>
<body>
<p>
This cursor will show the “wait” icon when you hover over this paragraph.
</p>
<h1>
This cursor will show the “help” icon when you hover over this heading.
</h1>
<h2>
This cursor will show the “crosshair” when you hover over this heading.
</h2>
<h3>This cursor will show the “pointer” when you hover over this heading.</h3>
</body>
</html>
| Example 2: |
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd”>
<HTML><HEAD><TITLE>css tutorial cursor</TITLE>
<BODY>
<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>
<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
src=”img/fct-images-cursor-vertical-text.gif”>
style=”cursor: vertical-text;” </P></DIV></BODY>
</HTML> |
|