Me gustaría reemplazar el cursor del mouse con una imagen personalizada cuando el mouse se desplaza sobre un elemento determinado. Lo hago configurando el cursor del ratón primero con

cursor: none;

cuando se cierne el elemento.

Luego leí la posición del cursor en el elemento desplazado y coloqué la posición css de un gráfico en la posición del cursor con un ligero desplazamiento, de modo que el cursor del ratón no esté sobre el gráfico sino sobre el área activada.

Hice un violín aquí:http://jsfiddle.net/TimG/6XeWK/

Ahora funciona todo tranquilo. El problema es que cuando mueves el mouse muy rápido, el cursor del mouse abandona el área de "hover" y "se desliza" sobre la imagen, lo que, por supuesto, hace imposible determinar la posición del mouse con respecto al área de "hover" (muévete muy rápido hacia la parte inferior izquierda). en el área negra de la libración). Podría hacer que resulte un poco más difícil deslizarse fuera del área flotante configurando el gráfico en

display: none;

antes de que se cambie la posición css de las imágenes y después de que se cambie, se configura en

display: block;

otra vez. Lamentablemente no evita este problema por completo.

Entonces: ¿Hay alguna forma de prevenir esto? ¿O hay una manera de poner el cursor del ratón detrás de la mano? ¿Algo así como establecer un índice z en el cursor del mouse (supongo que no sería posible, ya que no es un elemento DOM)?

Gracias por cualquier ayuda.