CODEWITHSUNDEEP
javascriptcss
Nadav
Nadav

Reputation: 2717

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

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

Upvotes: 1

Views: 485

Answers (2)

Nick Parsons
Nick Parsons

Reputation: 50749

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.

Upvotes: 1

Simplicius
Simplicius

Reputation: 2105

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!

Upvotes: 0

Related Questions