在空闲时间后隐藏我的鼠标光标，当我移动鼠标时它会显示出来

【问题标题】：to hide my mouse cursor after an idle time and it will be showed up when I move the mouse在空闲时间后隐藏我的鼠标光标，当我移动鼠标时它会显示出来
【发布时间】：2012-09-15 13:24:07
【问题描述】：

我正在创建一个阅读器 Web 应用程序。我想在空闲时间后隐藏我的鼠标光标，当我使用 JavaScript、CSS 为我的网页移动鼠标时它会显示出来。

实现它的最佳方法是什么？

谢谢

【问题讨论】：

重复问题：stackoverflow.com/questions/1071356/…
这不是完全重复的。时间部分没有在那里覆盖。您可以通过在隐藏函数上使用 setTimeout 并清除和重置超时 ID onMouseMove 轻松添加它。

标签： javascript css cursor mouseevent

【解决方案1】：

这对我有用（取自https://gist.github.com/josephwegner/1228975）。

注意对带有 id 包装器的 html 元素的引用。

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

【讨论】：