📂Programing

How to Change the Mouse Cursor Shape in HTML

Showcase

auto | default | none | context-menu | help | pointer | progress | wait | cell | crosshair | text | vertical-text | alias | copy | move | no-drop | not-allowed | grab | grabbing | all-scroll | col-resize | row-resize | n-resize | e-resize | s-resize | w-resize | ne-resize | nw-resize | se-resize | sw-resize | ew-resize | ns-resize | nesw-resize | nwse-resize | zoom-in | zoom-out

If you hover the mouse cursor over each of the links above, the cursor shape changes to match the name. You don’t have to use an a tag; any tag can set the cursor property in its style, for example:

Zoom-out

Code

HTML ¹

<a style="cursor: auto">auto</a>
<a style="cursor: default">default</a>
<a style="cursor: none">none</a>
<a style="cursor: context-menu">context-menu</a>
<a style="cursor: help">help</a>
<a style="cursor: pointer">pointer</a>
<a style="cursor: progress">progress</a>
<a style="cursor: wait">wait</a>
<a style="cursor: cell">cell</a>
<a style="cursor: crosshair">crosshair</a>
<a style="cursor: text">text</a>
<a style="cursor: vertical-text">vertical-text</a>
<a style="cursor: alias">alias</a>
<a style="cursor: copy">copy</a>
<a style="cursor: move">move</a>
<a style="cursor: no-drop">no-drop</a>
<a style="cursor: not-allowed">not-allowed</a>
<a style="cursor: grab">grab</a>
<a style="cursor: grabbing">grabbing</a>
<a style="cursor: all-scroll">all-scroll</a>
<a style="cursor: col-resize">col-resize</a>
<a style="cursor: row-resize">row-resize</a>
<a style="cursor: n-resize">n-resize</a>
<a style="cursor: e-resize">e-resize</a>
<a style="cursor: s-resize">s-resize</a>
<a style="cursor: w-resize">w-resize</a>
<a style="cursor: ne-resize">ne-resize</a>
<a style="cursor: nw-resize">nw-resize</a>
<a style="cursor: se-resize">se-resize</a>
<a style="cursor: sw-resize">sw-resize</a>
<a style="cursor: ew-resize">ew-resize</a>
<a style="cursor: ns-resize">ns-resize</a>
<a style="cursor: nesw-resize">nesw-resize</a>
<a style="cursor: nwse-resize">nwse-resize</a>
<a style="cursor: zoom-in">zoom-in</a>
<a style="cursor: zoom-out">zoom-out</a>

<p style="text-align:center; cursor: zoom-out; border: 1px solid black;">줌-아웃</p>