javascript
  1 min. de lectura (aproximado)

Cómo ocultar el cursor del ratón tras inactividad con JavaScript

(1 min. de lectura) Una manera de mejorar la experiencia en proyectos web, especialmente en juegos, visores de imágenes, vídeos, presentaciones o aplicaciones fullscreen. Una de las mejores formas es ocultar el cursor del ratón cuando el usuario está inactivo. Este pequeño detalle hace que la interfaz se sienta más limpia, inmersiva y profesional.

¿Cómo funciona?

  • Detectar cuando el usuario mueve el ratón.
  • Si pasa un tiempo sin moverse, se oculta el cursor.
  • En cuanto se vuelve a mover, mostralo nuevamente.

Código de ejemplo

let timeout;
const TIEMPO = 3000; //Tiempo para detectar la inactividad (3 segundos)

const estado = document.getElementById('estado');

function actualizarEstado(activo) {
 estado.textContent = activo ? 'Estado: Activo' : 'Estado: Inactivo (cursor oculto)';
 estado.style.color = activo ? '#0f0' : '#f00';
}

document.addEventListener('mousemove', () => {
 actualizarEstado(true);
 document.documentElement.style.cursor = 'default';
 
 clearTimeout(timeout);
 
 timeout = setTimeout(() => {
document.documentElement.style.cursor = 'none';
actualizarEstado(false);
 }, TIEMPO);
});