change the text of the label
<p>change the text of label to "hand" when the pointer become hand and hover on the box and then change the text back to "arrow" ... here is my code </p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
&lt;style&gt;
  #box:hover {
    background-color: red;
  }
  #box {
    width: 300px;
    height: 300px;
    border: 1px solid;
    background-color: black;
  }
&lt;/style&gt;

&lt;body&gt;
  &lt;div id="box" onmouseover="myFunction()"&gt;&lt;/div&gt;
  &lt;label id="lab"&gt;arrow&lt;/label&gt;
&lt;/body&gt;

&lt;script&gt;
  function myFunction() {
    document.getElementById("lab").innerHTML = "hand";
    document.getElementById("box").style.cursor = "pointer"
  }
&lt;/script&gt;

&lt;/html&gt;</code></pre>
</div>
</div>
</p>