一定時間後にカーソルを非表示にする

一定時間マウス操作がなかったときに、カーソルを非表示にできるかどうかを試してみました。

サンプルコード

まずは一定時間後にカーソルを消すようにしてみます。

CSS

html, body {
	height: 100%;
}
.cursor-hide {
	cursor: url(cursor.cur), auto;
}

JavaScript

$(function() {
	setTimeout(function() {
		$('body').addClass('cursor-hide');
	}, 3000);
});

一定時間後にカーソルを非表示にするデモページ
　

次に一定時間マウス操作がなかった場合にカーソルを非表示にしてみます。

JavaScript

var resizeTimer = null;
$(function() {
	$(window).on('load mousemove', function() {
		clearTimeout(resizeTimer);
		$('body').removeClass('cursor-hide');
		resizeTimer = setTimeout(function() {
			$('body').addClass('cursor-hide');
		}, 3000);
	});
});

一定時間マウス操作がなかったときにカーソルを非表示にするデモページ