¿Cómo ocultar mouse pasado un tiempo JavaScript?

Hola hoy les traigo un efecto que nos puede servir en alguna ocasión para algún proyecto y ese es ocultar el cursor del mouse pasado x tiempo

Las tecnologías que usaremos son:

1. HTML: para crear la estrucura y los elementos necesarios
2. CSS: utilizaremos la propiedad cursor para cambiar el cursor
3. JavaScript: manejaremos todo lo necesario para realizar este proyecto usaremos ,setTimeout ,manejo de eventos addEventListener entre otros

¿Para qué nos puede servir esto?

Pues en primer lugar y para lo que yo lo he usado es para crear mis reproductores personalizados de HTML5, después de un tiempo de inactividad del mouse se oculta el cursor logrando ver solo la pantalla, hay otras funcionalidades que les puedes dar y puedes usarlo para lo que realmente desees no solo ocultar el cursor pero en esta ocasión he decidido usar este ejemplo

<div id="contenido">
</div>
<style>
     /* le damos un estilo a nuestro div */
    #contenido{
     width: 250px;
     height: 200px;
    background-color: rgb(236, 232, 217);
    border:1px solid rgb(100, 92, 92);
            }
</style>
<script>
    var elemento=document.getElementById("contenido") //hacemos referencia al elemento por el id y lo guardamos en una variable
    elemento.addEventListener("mousemove",moviendo)//al elemento escuchamos el evento de mover el mouse
    var ciclo //declaramos una variable
    function moviendo(){
            clearTimeout(ciclo);
            elemento.style.cursor="auto"
        ciclo=setTimeout(ocultarCursor,3000);
    }
    function ocultarCursor(){
        elemento.style.cursor="none" 
    }
</script>        
    

Vista previa

Y listo con lo anterior bastaría para que se oculte el cursor después de un tiempo de inactividad del mouse

Lógica

Considero que no es necesario que expliquemos el HTML pero lo hare rápidamente por encima bueno creo un div con id contenido ,le agrego un estilo CSS y ninguna magia ahora viene la verdadera lógica,en la variable ciclo que declaramos simplemente es un señuelo por así decirlo para que cuando se elimine el setTimeout no de error mira lo que pasaría si quitamos dicha línea

Era de esperar vamos a quitar ciclo que no existe por eso en principio solo la declaramos, ahora en cada movimiento del mouse se va a estar ejecutando la función moviendo la cual va a eliminar el ciclo y crear uno nuevo o sea mientras se esté moviendo el mouse dentro del div va a eliminar el ciclo anterior y va a crear un nuevo ciclo por esa razón cuando dejemos de mover el mouse dejara de ejecutarse la función moviendo entonces no se eliminara el anterior lo que daría paso que en los 3 segundos que establecí se ejecute esa función

Bueno ese el funcionamiento básico para ocultar el mouse después de un tiempo de inactividad del ratón espero que se les haya servido nos vemos en la próxima Bye