FREE HTML CODE
Search HTML Code

HTML Cursor Code


Example Cursor Code

Here are examples that demonstrate the various CSS cursors (based on the CSS specification). See how the cursor changes as you hover over each line.




(Hover over each heading to see the cursor effect).

HTML cursor codes - "Auto"

HTML cursor codes - "Default"


HTML cursor codes - "Text"

HTML cursor codes - "Help"

HTML cursor codes - "Pointer"

HTML cursor codes - "Wait"

HTML cursor codes - "Crosshair"

HTML cursor codes - "Move"

HTML cursor codes - "Smile"

HTML cursor codes - "Progress"

HTML cursor codes - "e-resize"


HTML cursor codes - "ne-resize"

HTML cursor codes - "nw-resize"

HTML cursor codes - "n-resize"

HTML cursor codes - "se-resize"

HTML cursor codes - "sw-resize"

HTML cursor codes - "s-resize"

HTML cursor codes - "w-resize"

Here is the code used to create the above examples:



<html>

<head>

<style type="text/css">

.auto { cursor: auto }

.default { cursor: default }

.text { cursor: text }

.help { cursor: help }

.pointer { cursor: pointer }

.wait { cursor: wait }

.crosshair { cursor: crosshair }

.move { cursor: move }

.smile { cursor:url(http://www.quackit.com/pix/smile.gif),auto }

.progress { cursor: progress }

.e-resize { cursor: e-resize }

.ne-resize { cursor: ne-resize }

.nw-resize { cursor: nw-resize }

.n-resize { cursor: n-resize }

.se-resize { cursor: se-resize }

.sw-resize { cursor: sw-resize }

.s-resize { cursor: s-resize }

.w-resize { cursor: w-resize }

</style>

</head>

<body>

<p>(Hover over each heading to see the cursor effect).</p>



<h3 class="auto">HTML cursor codes - "Auto"</h3>

<h3 class="default">HTML cursor codes - "Default"</h3>

<h3 class="text">HTML cursor codes - "Text"</h3>

<h3 class="help">HTML cursor codes - "Help"</h3>

<h3 class="pointer">HTML cursor codes - "Pointer"</h3>



<h3 class="wait">HTML cursor codes - "Wait"</h3>

<h3 class="crosshair">HTML cursor codes - "Crosshair"</h3>

<h3 class="move">HTML cursor codes - "Move"</h3>

<h3 class="smile">HTML cursor codes - "Smile"</h3>

<h3 class="progress">HTML cursor codes - "Progress"</h3>



<h3 class="e-resize">HTML cursor codes - "e-resize"</h3>

<h3 class="ne-resize">HTML cursor codes - "ne-resize"</h3>

<h3 class="nw-resize">HTML cursor codes - "nw-resize"</h3>

<h3 class="n-resize">HTML cursor codes - "n-resize"</h3>

<h3 class="se-resize">HTML cursor codes - "se-resize"</h3>



<h3 class="sw-resize">HTML cursor codes - "sw-resize"</h3>

<h3 class="s-resize">HTML cursor codes - "s-resize"</h3>

<h3 class="w-resize">HTML cursor codes - "w-resize"</h3>

</body>
| More