change cursor

from w3

by trentHarlem

HTML

<p id="demo">Mouse over this text before and after you have clicked the button below.</p>

<button type="button" onclick="myFunction()">Change cursor</button>
 
 <p id="demo2"></p>

CSS

.pointer {
cursor: grab;
}

JavaScript

function myFunction() {
document.getElementById("demo2").innerText = 'grabber cursor now toggles when clicking on the text above'
  document.getElementById("demo").classList.toggle('pointer');
  document.getElementById("demo").addEventListener('mousedown', function() {
  document.getElementById("demo").style.cursor = "grabbing";
  })
   document.getElementById("demo").addEventListener('mouseup', function() {
  document.getElementById("demo").style.cursor = "grab";
  })
}