¿Es posible ocultar el cursor en una página web usando CSS o Javascript?

Quiero ocultar el cursor cuando se muestra una página web que debe mostrar información en una sala de construcción. No tiene que ser interactivo en absoluto. Intenté con la propiedad del cursor y una imagen transparente del cursor pero no lo hice funcionar.

¿Alguien sabe si esto se puede hacer? Supongo que esto puede considerarse como una amenaza de seguridad para un usuario que no puede saber dónde está haciendo clic, por lo que no soy muy optimista … ¡Gracias!

Con CSS:

selector { cursor: none; } 

Un ejemplo:

 

Para configurar esto en un elemento en Javascript, puede usar la propiedad de style :

 

Si quieres configurar esto en todo el cuerpo:

  

Sin embargo, asegúrate de que realmente quieres ocultar el cursor. Realmente puede molestar a la gente.

API de locking del puntero

Mientras que el cursor: none solución CSS es definitivamente una solución sólida y fácil, si su objective real es eliminar el cursor predeterminado mientras se usa su aplicación web, o implementar su propia interpretación del movimiento del mouse crudo (para juegos FPS, por ejemplo) , es posible que desee considerar el uso de la API Pointer Lock .

Puede usar requestPointerLock en un elemento para eliminar el cursor y redireccionar todos los eventos mousemove a ese elemento (que puede o no manejar):

 document.body.requestPointerLock(); 

Para liberar el locking, puede usar exitPointerLock :

 document.exitPointerLock(); 

Notas adicionales

Sin cursor, de verdad

Esta es una llamada API muy poderosa. No solo hace que el cursor sea invisible, sino que realmente elimina el cursor nativo de su sistema operativo . No podrá seleccionar texto ni hacer nada con el mouse (excepto escuchar algunos eventos del mouse en el código) hasta que se suelte el locking del puntero (ya sea utilizando exitPointerLock o presionando ESC en algunos navegadores).

Es decir, no puede abandonar la ventana con el cursor para que se muestre nuevamente, ya que no hay cursor.

Restricciones

Como se mencionó anteriormente, esta es una llamada API muy poderosa y, por lo tanto, solo se puede realizar en respuesta a alguna interacción directa del usuario en la web, como un clic; por ejemplo:

 document.addEventListener("click", function () { document.body.requestPointerLock(); }); 

Además, requestPointerLock no funcionará desde un iframe espacio aislado a menos que se establezca el permiso allow-pointer-lock .

Notificaciones de usuario

Algunos navegadores solicitarán al usuario una confirmación antes de activar el locking, otros simplemente mostrarán un mensaje. Esto significa que el locking del puntero podría no activarse inmediatamente después de la llamada. Sin embargo, la activación real del locking del puntero se puede escuchar escuchando el evento pointerchange en el elemento al que se llamó requestPointerLock :

 document.body.addEventListener("pointerlockchange", function () { if (document.pointerLockElement === document.body) { // Pointer is now locked to . } }); 

La mayoría de los navegadores solo mostrarán el mensaje una vez, pero Firefox ocasionalmente enviará el mensaje de spam en cada llamada. AFAIK, esto solo puede solucionarse con la configuración del usuario, ver Deshabilitar la notificación de locking de puntero en Firefox .

Escuchando el movimiento del mouse crudo

La API Pointer Lock no solo elimina el mouse, sino que redirige los datos de movimiento del mouse sin requestPointerLock al elemento requestPointerLock se requestPointerLock . Esto se puede escuchar simplemente usando el evento mousemove , luego accediendo a las propiedades movementX y movementY en el objeto event:

 document.body.addEventListener("mousemove", function (e) { console.log("Moved by " + e.movementX + ", " + e.movementY); }); 

Las otras respuestas en acción

 .nocursor { cursor: none; padding: 2em; border: 1px solid #000; } 
 
Bye cursor!

Lo hice con transparent * .cur 1px a 1px, pero parece un punto pequeño. 🙁 Creo que es lo mejor que puedo hacer entre navegadores. CSS2.1 no tiene valor ‘ninguno’ para la propiedad ‘cursor’, fue agregado en CSS3. Por eso es factible no en todas partes.

Si quieres hacerlo en CSS:

 #ID { cursor: none !important; } 

Para todo el documento html intente esto

 html * {cursor:none} 

O si algunos CSS sobrescriben el cursor: ¡ninguno lo usa!

 html * {cursor:none!important} 

Cuando lo hago

 body { cursor: none; } 

Todo lo que cambia es que el cursor desaparece (que es lo que quiero), pero el problema es que cuando pasa sobre un botón volverá a aparecer hasta que retire el cursor.