Hiding the mouse cursor when idle using JavaScript

In CSS 2 none is not a valid value for the cursor property. It is valid in CSS 3, however.

Otherwise you might be able to use a custom cursor loaded from a URI that is simply transparent.

I would consider this to be highly distracting for the user, though, so I wouldn't advise you to actually do that.

This worked for me (taken from https://gist.github.com/josephwegner/1228975).

Note reference to an html element with id wrapper.

//Requires jQuery - http://code.jquery.com/jquery-1.6.4.min.js
$(document).ready(function() { 


    var idleMouseTimer;
    var forceMouseHide = false;

    $("body").css('cursor', 'none');

    $("#wrapper").mousemove(function(ev) {
            if(!forceMouseHide) {
                    $("body").css('cursor', '');

                    clearTimeout(idleMouseTimer);

                    idleMouseTimer = setTimeout(function() {
                            $("body").css('cursor', 'none');

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

If anyone still looking for answer in 2019 (as did I), this approach works on FF 71 and Chrome 78:

var DEMO = {
  INI: {
    MOUSE_IDLE: 3000
  },
  hideMouse: function() {
    $("#game").css('cursor', 'none');
    $("#game").on("mousemove", DEMO.waitThenHideMouse);
  },
  waitThenHideMouse: function() {
    $("#game").css('cursor', 'default');
    $("#game").off("mousemove", DEMO.waitThenHideMouse);
    setTimeout(DEMO.hideMouse, DEMO.INI.MOUSE_IDLE);
  },
  showMouse: function() {
    $("#game").off("mousemove", DEMO.waitThenHideMouse);
    $("#game").css('cursor', 'default');
  },
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

It's simple and clear. This version uses DEMO.hideMouse() to start hiding mouse and DEMO.showMouse() to cancel the event. Change #game to div of your choice ...

It's more clear to work with on and off switch and named functions instead of lambdas.

I know that OP didn't specify that answers using JQuery are expected, but in my experience: I am always happy to see different approaches to learn from.

The following works for me in Firefox 3.6.13 so long as the cursor is over an actual element that doesn't have a non-default cursor (so it doesn't work if the cursor is over a form element or link, for example), although in general I recommend against doing this, because it is non-standard and extremely poor usability.

Aside: It's more compatible not to use querySelector() when there's an alternative, such as document.body or document.getElementById().

(function() {
    var mouseTimer = null, cursorVisible = true;

    function disappearCursor() {
        mouseTimer = null;
        document.body.style.cursor = "none";
        cursorVisible = false;
    }

    document.onmousemove = function() {
        if (mouseTimer) {
            window.clearTimeout(mouseTimer);
        }
        if (!cursorVisible) {
            document.body.style.cursor = "default";
            cursorVisible = true;
        }
        mouseTimer = window.setTimeout(disappearCursor, 5000);
    };
})();