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"
<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>