In my experience, this solution has proven effective in Firefox 3.6.13 as long as the cursor is positioned over a genuine element without a custom cursor (it won't work if hovering over a form field or link, for instance). However, I must advise against using this method due to its non-standard nature and negative impact on usability.

As a side note, it's better to avoid using querySelector() whenever possible and opt for alternatives like document.body or document.getElementById().

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

    function hideCursor() {
        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(hideCursor, 5000);
    };
})();

I found this solution to be effective (originally sourced from https://gist.github.com/josephwegner/1228975).

It is important to note the mention of an html element identified by the id "wrapper".

//Utilizes 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 you are still searching for a solution in 2019, like I was, this method is effective on FF 71 and Chrome 78:

var EXAMPLE = {
  INIT: {
    MOUSE_IDLE: 3000
  },
  hideCursor: function() {
    $("#game").css('cursor', 'none');
    $("#game").on("mousemove", EXAMPLE.waitThenHideMouse);
  },
  waitThenhideCursor: function() {
    $("#game").css('cursor', 'default');
    $("#game").off("mousemove", EXAMPLE.waitThenHideMouse);
    setTimeout(EXAMPLE.hideMouse, EXAMPLE.INIT.MOUSE_IDLE);
  },
  showCursor: function() {
    $("#game").off("mousemove", EXAMPLE.waitThenHideMouse);
    $("#game").css('cursor', 'default');
  },
};

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

This code is straightforward and easy to understand. Use EXAMPLE.hideCursor() to initiate the hiding of the cursor and EXAMPLE.showCursor() to stop the event. Replace #game with the desired div element ...

It's more organized to use the on and off methods along with named functions rather than anonymous functions.

I am aware that the original poster did not specify a preference for JQuery solutions, but personally, I find it beneficial to explore various methods to broaden my knowledge.

To ensure that no characters are lost when moving out of the screen-saver in my kiosk apps, where data is typically inputted via a barcode scanner or RFID reader and instantly bring the screen back on, I have implemented the following code snippets. This includes using a transparent cursor file and disabling all power saving options on the host OS to prevent any delays. Although tested on Chrome 12, it should work on other browsers as well. There isn't any browser-specific code involved; Chrome just happens to be the most convenient for launching into kiosk mode.

The code has some messy parts specifically designed for iterating through INPUT elements to preserve their default white background.

If your app involves images, colored text, or other objects, you will need to adapt the code accordingly. My focus is on building data acquisition apps with simple black text displays to avoid screen burn-in by setting the page background to black.

While this could be achieved with CSS applied via JavaScript, the current method works efficiently and can easily be copied and pasted where needed.

<body onkeydown="unSS();" id="thePage">

By having unSS triggered on keydown events within the body, the timer gets reset every time a key press is detected.

<script type="text/javascript">

var ScreenSaver = 10; // minutes

SS(); // initiate the timer

function unSS()
{
    document.getElementById('thePage').style.background='White';
    for (var i = 0; i < document.getElementsByTagName('INPUT').length; i++)
        {
            document.getElementsByTagName('INPUT')[i].style.background='White';
        }

    //bring back the default cursor
    document.getElementById('thePage').style.cursor = 'default';

    ScreenSaver=10;
}

function SS()
{
    ScreenSaver = ScreenSaver-1;  

    if (ScreenSaver<=0)
        {
            document.getElementById('thePage').style.background='Black';
            for (var i = 0; i < document.getElementsByTagName('INPUT').length; i++)
                {
                    document.getElementsByTagName('INPUT')[i].style.background='Black';
                }
               
               document.getElementById('thePage').style.cursor = 'url(transparentCursor.cur)';
        }

    setTimeout("SS();",60000);  
    }
...

If you're looking for a way to determine if a user is idle or active, consider using the jquery plugin idletimer.

To address the intermittent no-cursor issue, I have devised a simple solution by adding a transparent

<div id="overlay"> </div>

#overlay {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background-color: transparent;
  cursor: none;
  margin: 0;
  padding: 0;
  border: 0;
}

Using javascript, you can toggle the visibility between "visible" and "hidden". When the layer is set to "visible", it will conceal the cursor, and when set to "hidden", the cursor will be visible again.