Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
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.
//Requires jQuery -
$(document).ready(function() {
var idleMouseTimer;
var forceMouseHide = false;
$("body").css('cursor', 'none');
$("#wrapper").mousemove(function(ev) {
if(!forceMouseHide) {
$("body").css('cursor', '');
idleMouseTimer = setTimeout(function() {
$("body").css('cursor', 'none');
forceMouseHide = true;
setTimeout(function() {
forceMouseHide = false;
}, 200);
}, 1000);
Copy link

leolord commented Mar 31, 2014

There is a problem that I want hide cursor while people scrolling the window. It seams impossible.

Copy link

JSlote commented Jul 9, 2014

@leolord are you familiar with JQuery's scroll() event? Documentation is here:

Copy link

jeffThompson commented Jan 19, 2020

My situation might be a bit weird, but I found I needed to add this CSS to make this work in Firefox:

html, body {
  height: 100%;

Copy link

JohnTC commented Mar 6, 2021

Okay, but how can I stop the mouse hiding?

Copy link

josephwegner commented Mar 6, 2021

should be able to just move your mouse. It automatically unhides with movement.

Copy link

JohnTC commented Mar 6, 2021

It should only work on fullscreen ... on normal screen the function should stop.
I tried it with $('#wrapper').off("mousemove"); … but that does not work.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment