Always forget to use the cursor property, so make a note here

CSS Cursor properties

<! DOCTYPEhtml>
<html>
<head>
<meta charset="utf-8"> 
<title>Novice Tutorial (runoob.com)</title> 
</head>
<body>
    <p>Please move your mouse over the word and you can see the mouse pointer change:</p>
    <span style="cursor:auto">auto</span><br>
    <span style="cursor:crosshair">crosshair</span><br>
    <span style="cursor:default">default</span><br>
    <span style="cursor:e-resize">e-resize</span><br>
    <span style="cursor:help">help</span><br>
    <span style="cursor:move">move</span><br>
    <span style="cursor:n-resize">n-resize</span><br>
    <span style="cursor:ne-resize">ne-resize</span><br>
    <span style="cursor:nw-resize">nw-resize</span><br>
    <span style="cursor:pointer">pointer</span><br>
    <span style="cursor:progress">progress</span><br>
    <span style="cursor:s-resize">s-resize</span><br>
    <span style="cursor:se-resize">se-resize</span><br>
    <span style="cursor:sw-resize">sw-resize</span><br>
    <span style="cursor:text">text</span><br>
    <span style="cursor:w-resize">w-resize</span><br>
    <span style="cursor:wait">wait</span><br>
    <span style="cursor:not-allowed">not-allowed</span><br>
    <span style="cursor: grab"> grab</span><br>
    <span style="cursor:zoom-in"> zoom-in</span><br>
</body>
</html>
Copy the code
  • cursor:auto

  • cursor:crosshair

  • cursor:default

  • cursor:text

  • cursor:e-resize

  • cursor:help

  • cursor:move

  • cursor:n-resize

  • cursor:ne-resize

  • cursor:nw-resize

  • cursor:pointer

  • cursor:progress

  • cursor:s-resize

  • cursor:se-resize

  • cursor:sw-resize

  • cursor:w-resize

  • cursor:wait

  • cursor:not-allowed

  • cursor: grab

  • cursor:zoom-in

(This is a magnifying glass)

Preview the address