Firefox 不使用光标隐藏光标：无；

Question

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

这行 CSS 适用于 Chrome 和 IE11。

*, html { cursor: none !important; }

在 Chrome 和 IE11 中，光标是隐藏的，但在 Firefox（版本 60）中，当您按住鼠标按钮时，光标有时会隐藏，否则会保持可见。我知道光标：无；在 Firefox 中工作，但我似乎无法追踪为什么它没有被隐藏的问题。

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

Answer 1

您的 CSS 是正确的，但是，如果文档高度未 100% 填充，某些浏览器（您的情况是 FireFox）仍会显示光标

将下面添加到您的 CSS 将解决此问题。

html, body {
  height: 100%;
}

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;
}