Hide your cursor on a web page when it is idle. Great if you're using a web page for some sort of TV Display and don't want the cursor messing things up. #javascript #cursor #css #idle #hide

hide-idle-cursor.md

Hide your cursor on a web page when it is idle

Great if you're using a web page for some sort of TV Display and don't want the cursor messing things up

document.addEventListener("DOMContentLoaded", () => {
  let idleMouseTimer;
  let forceMouseHide = false;

  document.body.style.cursor = "none";

  // Your wrapper here
  document.body.addEventListener("mousemove", () => {
    if (forceMouseHide) {
      return;
    }

    document.body.style.cursor = "";

    clearTimeout(idleMouseTimer);

    idleMouseTimer = setTimeout(() => {
      document.body.style.cursor = "none";

      forceMouseHide = true;

      setTimeout(() => {
        forceMouseHide = false;
      }, 200);
    }, 1000);
  });
});

This is same as josephwegner/jquery-hideIdleCursor.js, but removed need for jQuery and ported to ES6 syntax.