如果几秒钟后在 div 内空闲，则隐藏鼠标光标答案

【问题标题】：Hide mouse cursor if idle inside a div after some seconds如果几秒钟后在 div 内空闲，则隐藏鼠标光标
【发布时间】：2015-08-04 00:36:50
【问题描述】：

如果不活动且在特定 div 内，如何让鼠标隐藏？我的网站上有“html5gallery-box-0” div，如果用户在几秒钟后让它在 div 上方/内部闲置，我需要隐藏鼠标。这是我正在处理的jsfiddle。

这是我用来在鼠标不活动时隐藏鼠标的js。

$(function () {
    var timer;
    var fadeInBuffer = false;
    $(document).mousemove(function () {
        if (!fadeInBuffer) {
            if (timer) {
                console.log("clearTimer");
                clearTimeout(timer);
                timer = 0;
            }

                console.log("fadeIn");
            $('html').css({
                cursor: ''
            });
        } else {
            fadeInBuffer = false;
        }


        timer = setTimeout(function () {
            console.log("fadeout");
            $('html').css({
                cursor: 'none'
            });
            fadeInBuffer = true;
        }, 500)
    });
});

【问题讨论】：

所以你当前的代码在指定延迟后隐藏了光标，但是你想知道如何平滑地淡出鼠标光标而不是立即隐藏它？或者您是在问如何仅在超过指定的 div 时才隐藏它？
我的错，我刚才翻译不正确，问题是无论鼠标在哪里，这段代码都会隐藏；我需要它来隐藏光标只有当它在“html5gallery-box-0”div内空闲时。

标签： javascript jquery css mouse-cursor

【解决方案1】：

这会起作用

 $(function() {
    var timer;
    var fadeInBuffer = false;
    $(document).mousemove(function() {
        if (!fadeInBuffer && timer) {
            console.log("clearTimer");
            clearTimeout(timer);
            timer = 0;

            console.log("fadeIn");
            $('html').css({
                cursor: ''
            });
        } else {
            $('.html5gallery-box-0').css({
                cursor: 'default'
            });
            fadeInBuffer = false;
        }


        timer = setTimeout(function() {
            console.log("fadeout");
            $('.html5gallery-box-0').css({
                cursor: 'none'
            });

            fadeInBuffer = true;
        }, 2000)
    });
    $('.html5gallery-box-0').css({
        cursor: 'default'
    });
});

这就是小提琴（如果你想改变空闲时间就这样做，现在是 2 秒）。

http://jsfiddle.net/eugensunic/1Lsqpm3y/4/

【讨论】：