title: Hiding the mouse cursor when idle using JavaScript
body: <p>Is it possible to use JavaScript to set the <code>cursor</code> attribute to the property <code>none</code> if the mouse is inactive for a certain amount of time (say, five seconds) and set it back to <code>auto</code> when it becomes active again?</p>
  
  <p><strong>EDIT:</strong> I realize that <code>none</code> is not a valid value for the <code>cursor</code> property. Nonetheless, many web-browsers seem to support it. Furthermore, the primary user for this is myself, so there is little chance of confusion arising as a result.</p>
  
  <p>I've got two scripts that can do something similar:</p>
  
  <pre><code>window.addEventListener("mousemove",
      function(){
          document.querySelector("#editor").style.background = "#000";
          setTimeout("document.querySelector('#editor').style.background = '#fff'", 5000);
      }
  , true);
  </code></pre>
  
  <p>and</p>
  
  <pre><code>var timeout;
  var isHidden = false;
  
  document.addEventListener("mousemove", magicMouse);
  
  function magicMouse() {
      if (timeout) {
          clearTimeout(timeout);
      }
      timeout = setTimeout(function() {
          if (!isHidden) {
              document.querySelector("body").style.cursor = "none";
              document.querySelector("#editor").style.background = "#fff";
              isHidden = true;
          }
      }, 5000);
      if (isHidden) {
          document.querySelector("body").style.cursor = "auto";
          document.querySelector("#editor").style.background = "#000";
          isHidden = false;
      }
  };
  </code></pre>
  
  <p>With each of these, when the mouse is inactive for more than five seconds the background color turns white, and when the cursor is moved the background turns black. However, they don't work for making the cursor disappear. What surprises me is that if I put the command <code>document.querySelector("body").style.cursor = "none";</code> into the JavaScript console it works perfectly. Inside the scripts, it does not seem to work.</p>
  
  <p>I've posted the above scripts as this is as far as I have come in getting this to work. I'm not necessarily asking for a fix for either of the scripts; if you know of a more efficient way of hiding the cursor, please share.</p>