Quiero agregar un ícono al mouse cuando pasen el elemento html, para poder sugerirle al usuario que puede hacer clic con el botón derecho.
No quiero reemplazar el cursor predeterminado, porque difieren en la plataforma y realmente no necesitan reemplazar el ícono del mouse predeterminado.
Puede agregar un detector de eventos mousemove en el elemento sobre el que desea mostrar el cursor personalizado que obtiene las coordenadas x e y relativas del mouse al elemento y las aplica a las propiedades de estilo top e left del cursor:
element.addEventListener('mousemove', function(e){ const rect = element.getBoundingClientRect(); const [x, y] = [e.pageX - rect.left, e.pageY - Math.abs(rect.top) + window.scrollY] cursor.style.display = "block"; cursor.style.left = x + "px"; cursor.style.top = y + "px"; }) element.addEventListener('mouseleave', function(e){ cursor.style.display = "none"; //hide the custom cursor when they leave the element }) #element{ height:1200px; width:600px; background-color:black; position:relative; } #cursor{ position:absolute; display:none; color:white; } <div id="element"><div id="cursor">right click!</div></div>Tenga en cuenta que esta solución requiere que el elemento contenedor esté en una posición relativa, ya que el cursor está en una posición absoluta.