Firefox不使用游标隐藏游标:无；

问题描述

我在这里做了一个简单的演示: https://jsfiddle.net/bwmgazfx/1/

I've made a simple demo here: https://jsfiddle.net/bwmgazfx/1/

该行CSS可在Chrome和IE11中使用.

The line of CSS works in Chrome and IE11.

*, html { cursor: none !important; }

在Chrome和IE11中，光标是隐藏的，但是在Firefox(版本60)中，当您按住鼠标按钮时，光标有时会隐藏，否则保持可见.我知道那个光标:没有；可以在Firefox中运行，但是我似乎无法找到问题所在，为什么它没有被隐藏.

In Chrome and IE11 the cursor is hidden, but in Firefox (version 60)the cursor sometimes hides when you hold the mouse button down but otherwise stays visible. I know that cursor: none; works in Firefox but I can't seem to track down the problem as to why it's not being hidden.

我的问题是，为什么光标没有隐藏在Firefox 61中?

My question is, why is the cursor not hidden in Firefox 61?

推荐答案

您的CSS是正确的，但是，如果未将文档高度填充100％，某些浏览器(在您的情况下为FireFox)仍会显示光标

Your CSS is correct, however, some browsers (your case FireFox) will still show the cursor if the document height is not filled 100%

在CSS下方添加内容即可解决此问题.

Adding below to your CSS will fix this.

html, body {
  height: 100%;
}

---

var x = null;
var y = null;

document.addEventListener('mousemove', onMouseUpdate, false);
document.addEventListener('mousemove', onMouseUpdate, false);
document.addEventListener('mousedown', onClickMouse, false);
document.addEventListener('mouseup', onReleaseMouse, false);

var $mousePointer = document.getElementById('mouse-pointer');

function onMouseUpdate(e) {
    x = e.pageX;
    y = e.pageY;

    $mousePointer.style.top = y + "px";
    $mousePointer.style.left = x + "px";
}

function onClickMouse(e) {
    $mousePointer.style.transform = "matrix(0.75, 0, 0, 0.75, 0, 0)";
}

function onReleaseMouse(e) {
    $mousePointer.style.transform = "matrix(1, 0, 0, 1, 0, 0)";
}

html, body {
  height: 100%;
}

*, html {
  cursor: none;
}

body {
    background-image: url(tile.jpg);
    background-repeat: repeat;
}

#mouse-pointer {
    width: 12px;
    height: 12px;
    position: absolute;
    background-color: red;
    border-radius: 50%;
    transform: matrix(1, 0, 0, 1, 0, 0);
    transition: transform 0.4s;
}

<div id="mouse-pointer"></div>

这篇关于Firefox不使用游标隐藏游标:无；的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！