在空闲时使用JavaScript隐藏鼠标光标 [英] Hiding the mouse cursor when idle using JavaScript

问题描述

如果鼠标无效，可以使用JavaScript将 cursor 属性设置为属性 none 一定时间（例如五秒），并在再次活动时将其设置回 auto ？

Is it possible to use JavaScript to set the cursor attribute to the property none if the mouse is inactive for a certain amount of time (say, five seconds) and set it back to auto when it becomes active again?

EDIT：我意识到 none 不是 cursor 属性的有效值。尽管如此，许多网络浏览器似乎支持它。

I realize that none is not a valid value for the cursor property. Nonetheless, many web-browsers seem to support it. Furthermore, the primary user for this is myself, so there is little chance of confusion arising as a result.

我有两个脚本可以做类似的事情：

I've got two scripts that can do something similar:

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控制台，它完美地工作。在脚本中，它似乎不工作。

With each of these, when the mouse is inactive for more than five seconds the background color turns white, and when the cursor is moved the background turns black. However, they don't work for making the cursor disappear. What surprises me is that if I put the command document.querySelector("body").style.cursor = "none"; into the JavaScript console it works perfectly. Inside the scripts, it does not seem to work.

我已经发布了上述脚本，因为这是我已经得到这个工作。我不一定要求修复任何一个脚本;如果你知道更有效的隐藏光标的方法，请分享。

I've posted the above scripts as this is as far as I have come in getting this to work. I'm not necessarily asking for a fix for either of the scripts; if you know of a more efficient way of hiding the cursor, please share.

推荐答案

在CSS 2 none 不是 cursor 属性。然而，它在CSS 3中有效。

In CSS 2 none is not a valid value for the cursor property. It is valid in CSS 3, however.

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

Otherwise you might be able to use a custom cursor loaded from a URI that is simply transparent.

我认为这对用户来说是非常分心的，所以我不建议你这样做。

I would consider this to be highly distracting for the user, though, so I wouldn't advise you to actually do that.

这篇关于在空闲时使用JavaScript隐藏鼠标光标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！