Is it possible to hide the cursor in a webpage using CSS or Javascript?

Dynamically manipulate cursor visibility with JavaScript

Hitting maximum flexibility with JavaScript, here's how you can dynamically hide the cursor:

// Hey, Cursor! I have bad news...
document.documentElement.style.cursor = 'none';


This piece of code sends your cursor into oblivion on the entire webpage. But it can be more precise:

// This particular element? Yup, cursor's worst nightmare.
document.getElementById('elementId').style.cursor = 'none';


In the above example, replace 'elementId' with the ID of your target element. The cursor meets its vanish-vanish doom when hovering over it.

Advanced techniques: Pointer Lock API

Need more control, like a puppet master? Enter the Pointer Lock API. Super useful when your webpage needs direct mouse input, such as online gaming. In other words, it's your secret weapon to make the juice worth the squeeze:

// Requesting permission to vanish the cursor, Captain!
document.body.requestPointerLock();


One caveat: Pointer Lock can be a bit of a diva, often prompting the user for permission due to potential abuse. When you need to release the Pointer Lock and show the cursor again:

// OK, cursor. Time for a comeback!
document.exitPointerLock();


When mixed with "mousemove" event, Pointer Lock can detect raw mouse movements. The opportunity? You can control cursor visibility customarily. It's an orchestra, and you conduct.

Be mindful of user experience

Hide the cursor only if it suits your UI/UX design, else user navigation could suffer. If your site requires substantial user interaction, provide some alternative navigation to avoid your users feeling like they're playing blindfolded.

The cross-browser compatibility challenge

Let's address the elephant in the room: cross-browser compatibility. Not every browser supports cursor: none; identically. Bring in the big guns:

* {
  cursor: none !important;
}


The mighty !important quashes any alien style conflicts, maintaining cursor invisibility in all elements.

Security concerns and transparent interactions

Invisible interaction areas could inadvertently give way to security risks, because what you don't see can hurt you! Uphold transparent communication with users about your site's operation to mitigate potential deception or user frustration.

Non-interactive displays or art installations

For presentational contexts, such as kiosk displays or art installations where interaction isn't needed, the perfect camouflage for your cursor is invisibility. A word of advice: always prototype for a smooth user experience.

An alternative: use transparent cursor images

When playing peek-a-boo with the cursor doesn't work across browsers, revert to a transparent .cur file:

body {
  cursor: url('transparent.cur'), default;
}


Less common, a tad messy, but a good Plan B that sees the cursor Incognito.

Overcoming user interaction restrictions

A gentle reminder: some browsers aren't fine with scripts modifying styles without prior user interaction. This could govern how and when you hide your cursor using JavaScript.