在某个div中，如果鼠标闲置一段时间后，隐藏鼠标指针。

Question

如何让鼠标在特定的div内处于不活动状态时自动隐藏？

我在网站上有一个名为“html5gallery-box-0”的div，如果用户在其中停留几秒钟，我需要鼠标隐藏。

以下是我正在使用的js代码以在鼠标处于不活动状态时隐藏它。

这是我正在工作的jsfiddle。

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

- Andrea Cazzola

---

那么，您目前的代码在指定延迟后隐藏光标，但您想知道如何使鼠标光标平滑淡出，而不仅仅是立即隐藏它？或者您是在询问如何仅在光标位于指定div上方时隐藏它？ - nnnnnn

我的错，我刚刚翻译错了，问题在于这段代码会在鼠标所在位置隐藏光标；而我需要它仅在“html5gallery-box-0” div内空闲时隐藏光标。 - Andrea Cazzola

Answer 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/

- EugenSunic