javascript - hiding cursor on all page (even if there is a css which says otherwise on some element)

Question

I am trying to apply a javascript code that should make the cursor invisible on the entire web page with document.body.style.cursor = 'none';

but when there are other elements inside the page that have a specific style or are being applied with a css class (which set the cursor to a specific value) the mouseover on those elements makes the cursor to be visible.

here is an example for a html page with my problem:

<html>
  <head>
    <style>
       pointerCursor {
         cursor: "pointer"; 
       }
    </style>
  </head>
  <body>
    <h1> here is a web page </h1>
    <button class="pointerCursor">click me</button>
  </body>
</html>

when this code is being applied document.body.style.cursor = 'none'; the mouse remains not hidden on the button

Thanks

Do you still want to be able to react to input or events? If not you can just use an opacity overlay. — Lain, Aug 27 '20 at 12:25
yupp I want it to be visible or invisible depending on the context (events) — Nadav, Aug 27 '20 at 12:28
There is a pure CSS solution. https://codepen.io/MrFuze/pen/MWymvMW — Simplicius, Aug 27 '20 at 12:32
@Simplicius - exactly but we want the link cursor to be invisible — Nadav, Aug 27 '20 at 12:34
Does this answer your question? [Is it possible to hide the cursor in a webpage using CSS or Javascript?](https://stackoverflow.com/questions/1071356/is-it-possible-to-hide-the-cursor-in-a-webpage-using-css-or-javascript) — MaxiGui, Aug 27 '20 at 12:46
@Simplicius I am looking for a javascript solution and not a css one — Nadav, Aug 27 '20 at 12:48

Nick Parsons · Accepted Answer · 2020-08-27T12:49:52.043

You could add a fixed positioned div which overlays your website. The div would have a style of cursor: none, and since it is an overlay, the styles of the elements below it won't trigger the cursor to change

const overlay = document.createElement('div');
overlay.classList.add('overlay');
document.body.insertAdjacentElement('beforeend', overlay);

.overlay {
  position: fixed;
  cursor: none;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.pointerCursor {
  cursor: "pointer";
}

<html>

<body>
  <h1> here is a web page </h1>
  <button class="pointerCursor">click me</button>
</body>

</html>

This can be toggled by adding and removing the overlay div.

Note: This will make inputs such as buttons disabled (as the overlay will be clicked rather than the inputs). Not entirely sure if this is wanted behaviour or not though.

Simplicius · Answer 2 · 2020-08-27T12:47:48.833

0

Here you go, sorry misunderstood it first.

* {
   cursor: none !important;
}

a {
   cursor: pointer;
}

a.show {
   padding-left: 1rem;
  cursor: pointer !important;
}

<a href="#">Example link</a>

<a class="show" href="#">Example link</a>

Not sure if it counts tho, since you requested a JS solution. Hope it helps you anyway!

edited Aug 27 '20 at 12:47

answered Aug 27 '20 at 12:37

Simplicius

2,009
1
5
19

thanks anyway but as you said - I am looking for a javascript code that I can apply on event so one function for making the mouse cursor visible and another to make the cursor invisible (in the entire page - no matter if there is a cursor with some value applied with a css class / style on any html element – Nadav Aug 27 '20 at 12:44
@NadavStern. Yes, that's what I figured. You can however add `!important` to those elements you want the cursor to be shown on during hover. I updated my answer to showcase that. – Simplicius Aug 27 '20 at 12:46

javascript - hiding cursor on all page (even if there is a css which says otherwise on some element)

2 Answers2