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

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

サンプルコード

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

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);
	});
});

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

このエントリーをはてなブックマークに追加

関連記事

1件のコメント

  1. 名無し より:

    この記事に助けられました。ありがとうございます。

コメントを残す

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です

CAPTCHA


コメントが承認されるまで時間がかかります。

2022年11月
 12345
6789101112
13141516171819
20212223242526
27282930