cursor


                                cursor: [ [<uri> ,]* [ auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize | text | wait | help | progress ] ] | inherit

Initial:	auto
Applies To:	all elements
Inherited:	yes
Percentages:	NA
Media:	visual, interactive

Values
DOM
Example | Values | auto
Example | Values | crosshair
Example | Values | default
Example | Values | e-resize
Example | Values | help
Example | Values | move
Example | Values | n-resize
Example | Values | ne-resize
Example | Values | nw-resize
Example | Values | pointer
Example | Values | progress
Example | Values | s-resize
Example | Values | se-resize
Example | Values | sw-resize
Example | Values | text
Example | Values | uri
Example | Values | w-resize
Example | Values | wait
Example | DOM
Reference


                                cursor: value;


Value:	Description:
auto	Indicates the cursor is determined by the current context
crosshair	Indicates a location point
default	Default cursor
e-resize	Indicates the east edge is to be moved
help	Indicates help is available
inherit	Takes the same computed value as the property for the element's parent
move	Indicates something is to be moved
n-resize	Indicates the north edge is to be moved
ne-resize	Indicates the north east edge is to be moved
nw-resize	Indicates the north west edge is to be moved
pointer	Indicates a link
progress	Indicates the program is busy, but the user may still interact
s-resize	Indicates the south edge is to be moved
se-resize	Indicates the south east edge is to be moved
sw-resize	Indicates the south west edge is to be moved
text	Indicates text may be selected
uri	Indicates the cursor is designated by the URI
w-resize	Indicates the west edge is to be moved
wait	Indicates the program is busy and the user should wait


                                [window.]document.getElementById("element-id").style.cursor = "cursor";

Example | Values | text

<html>
  <head>
    <title>cursor</title>
  </head>
  <body>
    <a href="/" id="id1" onmouseover="mouseover1();">auto</a>
    <a href="/" id="id2" onmouseover="mouseover2();">pointer</a>
    <a href="/" id="id3" onmouseover="mouseover3();">uri</a>
    <a href="/" id="id4" onmouseover="mouseover4();">default</a>
    <a href="/" id="id5" onmouseover="mouseover5();">help</a>
    <a href="/" id="id6" onmouseover="mouseover6();">progress</a>
    <a href="/" id="id7" onmouseover="mouseover7();">wait</a>
    <a href="/" id="id8" onmouseover="mouseover8();">text</a>
    <a href="/" id="id9" onmouseover="mouseover9();">crosshair</a>
    <a href="/" id="id10" onmouseover="mouseover10();">move</a><br>
    <a href="/" id="id11" onmouseover="mouseover11();">n-resize</a>
    <a href="/" id="id12" onmouseover="mouseover12();">ne-resize</a>
    <a href="/" id="id13" onmouseover="mouseover13();">e-resize</a>
    <a href="/" id="id14" onmouseover="mouseover14();">se-resize</a>
    <a href="/" id="id15" onmouseover="mouseover15();">s-resize</a>
    <a href="/" id="id16" onmouseover="mouseover16();">sw-resize</a>
    <a href="/" id="id17" onmouseover="mouseover17();">w-resize</a>
    <a href="/" id="id18" onmouseover="mouseover18();">nw-resize</a><br>
  </body>
  <script type="text/javascript">
    function mouseover1() {
      document.getElementById("id1").style.cursor = "auto";
    }
    function mouseover2() {
      document.getElementById("id2").style.cursor = "pointer";
    }
    function mouseover3() {
      document.getElementById("id3").style.cursor = "url(/assets/png/HappyFace.png), pointer";
    }
    function mouseover4() {
      document.getElementById("id4").style.cursor = "default";
    }
    function mouseover5() {
      document.getElementById("id5").style.cursor = "help";
    }
    function mouseover6() {
      document.getElementById("id6").style.cursor = "progress";
    }
    function mouseover7() {
      document.getElementById("id7").style.cursor = "wait";
    }
    function mouseover8() {
      document.getElementById("id8").style.cursor = "text";
    }
    function mouseover9() {
      document.getElementById("id9").style.cursor = "crosshair";
    }
    function mouseover10() {
      document.getElementById("id10").style.cursor = "move";
    }
    function mouseover11() {
      document.getElementById("id11").style.cursor = "n-resize";
    }
    function mouseover12() {
      document.getElementById("id12").style.cursor = "ne-resize";
    }
    function mouseover13() {
      document.getElementById("id13").style.cursor = "e-resize";
    }
    function mouseover14() {
      document.getElementById("id14").style.cursor = "se-resize";
    }
    function mouseover15() {
      document.getElementById("id15").style.cursor = "s-resize";
    }
    function mouseover16() {
      document.getElementById("id16").style.cursor = "sw-resize";
    }
    function mouseover17() {
      document.getElementById("id17").style.cursor = "w-resize";
    }
    function mouseover18() {
      document.getElementById("id18").style.cursor = "nw-resize";
    }
  </script>
</html>

W3C Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification

CSS

Values

DOM

Example | Values | auto

Example | Values | crosshair

Example | Values | default

Example | Values | e-resize

Example | Values | help

Example | Values | move

Example | Values | n-resize

Example | Values | ne-resize

Example | Values | nw-resize

Example | Values | pointer

Example | Values | progress

Example | Values | s-resize

Example | Values | se-resize

Example | Values | sw-resize

Example | Values | text

Example | Values | uri

Example | Values | w-resize

Example | Values | wait

Example | DOM

Reference