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

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没有使用cursor：none隐藏游标;

1 个答案: