使用JavaScript在空闲时隐藏鼠标光标

Question

如果鼠标在一段时间内(例如,五秒钟)处于非活动状态并且将其重新设置为再次激活时,是否可以使用JavaScript将cursor属性设置为属性？noneauto

编辑:我意识到这none不是该cursor属性的有效值.尽管如此,许多网络浏览器似乎都支持它.此外,这方面的主要用户是我自己,因此几乎不会出现混淆的可能性.

我有两个可以做类似的脚本:

window.addEventListener("mousemove",
    function(){
        document.querySelector("#editor").style.background = "#000";
        setTimeout("document.querySelector('#editor').style.background = '#fff'", 5000);
    }
, true);

和

var timeout;
var isHidden = false;

document.addEventListener("mousemove", magicMouse);

function magicMouse() {
    if (timeout) {
        clearTimeout(timeout);
    }
    timeout = setTimeout(function() {
        if (!isHidden) {
            document.querySelector("body").style.cursor = "none";
            document.querySelector("#editor").style.background = "#fff";
            isHidden = true;
        }
    }, 5000);
    if (isHidden) {
        document.querySelector("body").style.cursor = "auto";
        document.querySelector("#editor").style.background = "#000";
        isHidden = false;
    }
};

对于其中的每一个,当鼠标处于非活动状态超过五秒时,背景颜色变为白色,而当光标移动时,背景变为黑色.但是,它们不能使光标消失.让我感到惊讶的是,如果我将命令document.querySelector("body").style.cursor = "none";放入JavaScript控制台,它就能完美运行.在脚本中,它似乎不起作用.

我已经发布了上面的脚本,因为这是我开始使用它.我不一定要求修复任何一个脚本; 如果你知道一种更有效的隐藏光标的方法,请分享.

Answer 1

在CSS 2 none中,该cursor属性不是有效值.但是,它在CSS 3中有效.

否则,您可以使用从简单透明的URI加载的自定义游标.

我会认为这对用户来说非常分散注意力,所以我不建议你实际这样做.

Answer 2

只要光标位于没有非默认光标的实际元素上,以下内容适用于我的Firefox 3.6.13(因此,如果光标位于表单元素或链接上,则它不起作用,例如),虽然总的来说我建议不要这样做,因为它是非标准的,极差的可用性.

除此之外:querySelector()当有替代品时,它更兼容,例如document.body或document.getElementById().

(function() {
    var mouseTimer = null, cursorVisible = true;

    function disappearCursor() {
        mouseTimer = null;
        document.body.style.cursor = "none";
        cursorVisible = false;
    }

    document.onmousemove = function() {
        if (mouseTimer) {
            window.clearTimeout(mouseTimer);
        }
        if (!cursorVisible) {
            document.body.style.cursor = "default";
            cursorVisible = true;
        }
        mouseTimer = window.setTimeout(disappearCursor, 5000);
    };
})();