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

Question

是否可以使用 JavaScript 将 cursor 属性设置为属性 none 如果鼠标处于非事件状态一段时间(例如，五秒)和当它再次激活时将其设置回 auto？

编辑: 我意识到 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 property 的有效值.但是，它在 CSS 3 中有效。

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

不过，我认为这会极大地分散用户的注意力，因此我不建议您实际这样做。