Question

我试图隐藏鼠标，如果它没有移动一段时间。

这是我正在使用的代码：

$(document).ready(function() {
    var j;
    $(document).mousemove(function() {
        clearTimeout(j);
        $('html').css({cursor: 'default'});
        j = setTimeout('hide();', 1000);
    });
});

function hide() {
    $('html').css({cursor: 'none'});
}

当调用hide（）函数时，光标被隐藏，但稍后取消隐藏。任何帮助表示赞赏。

Answer 1

您最初的问题是隐藏鼠标会触发mousemove，从而立即将其重置为默认值。所以你可以这样解决......

var justHidden = false;

$(document).ready(function() {
    var j;
    $(document).mousemove(function() {
        if (!justHidden) {
            justHidden = false;
            console.log('move');
            clearTimeout(j);
            $('html').css({cursor: 'default'});
            j = setTimeout('hide();', 1000);
        }
    });
});

function hide() {
    $('html').css({cursor: 'none'});
    justHidden = true;
}

... BUUUUUT ...

你在这里遇到一个问题，此刻对我来说似乎无法解决。也就是说，隐藏的鼠标永远不会触发mousemove，所以一旦它隐藏起来，就我所知，你将无法取消隐藏它。

我会继续调查，看看是否有一个我不知道的解决方案。

Answer 2

我在2019年寻找解决方案时找到了这个线程。基于此处和'Hiding the mouse cursor when idle using JavaScript'中的回答，我提出了一个略有不同的解决方案：

var DEMO = {
  INI: {
    MOUSE_IDLE: 3000
  },
  hideMouse: function() {
    $("#game").css('cursor', 'none');
    $("#game").on("mousemove", DEMO.waitThenHideMouse);
  },
  waitThenHideMouse: function() {
    $("#game").css('cursor', 'default');
    $("#game").off("mousemove", DEMO.waitThenHideMouse);
    setTimeout(DEMO.hideMouse, DEMO.INI.MOUSE_IDLE);
  },
  showMouse: function() {
    $("#game").off("mousemove", DEMO.waitThenHideMouse);
    $("#game").css('cursor', 'default');
  },
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

通过这个简单明了的示例，您可以选择隐藏鼠标（DEMO.hideMouse()），也可以关闭鼠标（DEMO.showMouse()）。它不会在同一元素上创建多个事件。此示例显示了将鼠标指针隐藏在#game div元素上。只需将其更改为您选择的div或body。

截至2019年10月全面更新的Chrome和FF：两者均适用。

Answer 3

我迟了8年，但我有解决方案：

•首先，从互联网上下载光标图像或复制我的svg代码：

<svg id="cursor" width="20" height="20" viewBox="0 0 95 92" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M84.6925 46.0105L40.25 20.3516C35.25 17.4648 29 21.0733 29 26.8468L29 78.1645C29 84.9879 37.3721 88.2664 42.0056 83.2575L58.1424 65.8134C58.4853 65.4427 58.9324 65.1846 59.4249 65.0729L82.6003 59.8201C89.255 58.3118 90.6017 49.4222 84.6925 46.0105Z" fill="black" stroke="white" stroke-width="5"/></svg>

并将其添加到您的html文件中。

•当然，如果要在jQuery中创建脚本，则需要将此脚本添加到js文件上方：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

•然后将其添加（在您的JavaScript文件中）：

let timedelay = 1;

function delayCheck() {
  if (timedelay == 2) { //Here you can change this value which changes the time it takes the mouse to hide
    $('#cursor').fadeOut();
    timedelay = 1;
  }
  timedelay += 1;
}
$(document).mousemove(function() {
  $('#cursor').fadeIn();
  timedelay = 1;
  clearInterval(_delay);
  _delay = setInterval(delayCheck, 1000);
});
_delay = setInterval(delayCheck, 1000);

现在，您会在屏幕的左上角看到仅一个光标，该光标会执行您所要的操作，但不是您的光标，用svg替换光标，请执行以下操作：

//in the same js file as before
$(document).mousemove(function (e) {
    $('#cursor').offset({
        left: e.clientX,
        top: e.clientY
    });
});

/* on the css */
html {
cursor: none;
}

如果它不起作用，请确保将jquery文件放在编写的文件上方。我希望我已经帮助了某人！您可能想检查一下是否确实有效，这里是demo。（对不起，如果我的英语不好，我是意大利语）。

（提示）您将注意到有两个相同的功能，如果要合并它们，只需将其替换为此：

$(document).mousemove(function(e) {
  $('#cursor').fadeIn();
  timedelay = 1;
  clearInterval(_delay);
  _delay = setInterval(delayCheck, 1000);
  $('#cursor').offset({
    left: e.clientX,
    top: e.clientY
  });
});

如果JQuery没有移动，它会隐藏鼠标

3 个答案:

... BUUUUUT ...