Skip to content

Instantly share code, notes, and snippets.

Embed
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 - 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);
}
});
});
@leolord

This comment has been minimized.

Copy link

@leolord leolord commented Mar 31, 2014

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

@JSlote

This comment has been minimized.

Copy link

@JSlote JSlote commented Jul 9, 2014

@leolord are you familiar with JQuery's scroll() event? Documentation is here: http://api.jquery.com/scroll/

@jeffThompson

This comment has been minimized.

Copy link

@jeffThompson 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%;
}
@JohnTC

This comment has been minimized.

Copy link

@JohnTC JohnTC commented Mar 6, 2021

Okay, but how can I stop the mouse hiding?

@josephwegner

This comment has been minimized.

Copy link
Owner Author

@josephwegner josephwegner commented Mar 6, 2021

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

@JohnTC

This comment has been minimized.

Copy link

@JohnTC 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