HTML Cursor Code

This page contains HTML cursor code. Code that will make the user's cursor change as they hover over an HTML element.

The cursor is the thing that moves when you move the mouse. To change the look of the cursor within your HTML codes, you need to use CSS (Cascading Style Sheets).

More specifically, you need to use the CSS cursor property.

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.

<p>(Hover over each line to see the cursor effect).</p>
<div>
<p style="cursor:auto">Cursor: "Auto"</p>
<p style="cursor:default">Cursor: "Default"</p>
<p style="cursor:text">Cursor: "Text"</p>
<p style="cursor:help">Cursor: "Help"</p>
<p style="cursor:pointer">Cursor: "Pointer"</p>
<p style="cursor:wait">Cursor: "Wait"</p>
<p style="cursor:crosshair">Cursor: "Crosshair"</p>
<p style="cursor:move">Cursor: "Move"</p>
<p style="cursor:smile">Cursor: "Smile"</p>
<p style="cursor:progress">Cursor: "Progress"</p>
<p style="cursor:e-resize">Cursor: "e-resize"</p>
<p style="cursor:ne-resize">Cursor: "ne-resize"</p>
<p style="cursor:nw-resize">Cursor: "nw-resize"</p>
<p style="cursor:n-resize">Cursor: "n-resize"</p>
<p style="cursor:se-resize">Cursor: "se-resize"</p>
<p style="cursor:sw-resize">Cursor: "sw-resize"</p>
<p style="cursor:s-resize">Cursor: "s-resize"</p>
<p style="cursor:w-resize">Cursor: "w-resize"</p>
</div>

HTML Cursor Code

Example Cursor Code

Related