I've made a simple demo here: /

The line of CSS works in Chrome and IE11.

*, html { cursor: none !important; }

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.

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

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

The line of CSS works in Chrome and IE11.

*, html { cursor: none !important; }

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.

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

• javascript
• html
• css
• firefox

• why not just change the cursor to an image of the red dot? then you wouldn't need all the js too – Pete Commented Jun 15, 2018 at 11:30
• I think that as something to do with iframes: you can't hide the cursor with cursor: none on iframes I believe. – Ivan Commented Jun 15, 2018 at 11:32
• it seem to be working at w3schools./cssref/… so i believe this is a problem with jsfiddle. have you tried jsut creating a local .html file on your puter to test it? – Joachim Haglund Commented Jun 15, 2018 at 11:40
• if you change it to cursor:help or something on js fiddle, you can see that the help icon blinks trough once in a while, so it is probably just an iframe issue like Ivan suggests – Joachim Haglund Commented Jun 15, 2018 at 11:41
• (What are you actually trying to achieve here? Depending on what browser support you need, cursor: url() might be a simpler way to achieve the desired effect perhaps … without the need for any JavaScript in that regard.) – C3roe Commented Jun 15, 2018 at 12:16

1 Answer 1

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

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>