javascript - 不活动时淡出鼠标光标（使用 jQuery）

Question

我有一个带有类的元素，fade-object当鼠标处于非活动状态一段时间（在本例中为 5000 毫秒）时会淡出，并在鼠标再次移动时淡入。

这是我正在使用的代码：

       var timer;
        $(document).mousemove(function() {
            if (timer) {
                clearTimeout(timer);
                timer = 0;
            }

            $('.fade-object').fadeIn();
            timer = setTimeout(function() {
                $('.fade-object').fadeOut()
            }, 5000)
        })

如何使鼠标光标以相同的方式淡入和淡出，与我的fade-objectdiv 同步？

Answer 1

cursor: none在 的 CSS 中设置并html防止mousemove在 a 之后直接发生的事件fadeout重新显示该项目。

演示

$(function () {
    var timer;
    var fadeInBuffer = false;
    $(document).mousemove(function () {
        if (!fadeInBuffer) {
            if (timer) {
                clearTimeout(timer);
                timer = 0;
            }
            $('.fade-object').fadeIn();
            $('html').css({
                cursor: ''
            });
        } else {
            fadeInBuffer = false;
        }


        timer = setTimeout(function () {
            $('.fade-object').fadeOut()
            $('html').css({
                cursor: 'none'
            });
            fadeInBuffer = true;
        }, 5000)
    });
});

Answer 2

cursor: none延迟通过 jQuery申请。不要以为可以让它淡出。

此 css 属性的使用仅限于 Firefox 3+、Safari 5+ 和 Chrome 5+。它在 IE 中不受支持（如此处所述）。

我在jsBin放了一个例子，在我的浏览器中它不起作用（Linux 上的 Firefox 19.0.2），尽可能多地使用浏览器对其进行测试:)

无论如何，我不能推荐这种技术，如果您考虑一下鼠标光标是操作系统 UI 的一部分，那么向用户隐藏不属于您的 UI 的东西绝不是一个好主意。