Eu gostaria de substituir o cursor do mouse por uma imagem personalizada quando o mouse passar por cima de um determinado elemento. Eu faço isso configurando o cursor do mouse primeiro

cursor: none;

quando passa o elemento.

Em seguida, eu leio a posição do cursor no elemento flutuante e defino a posição css de um gráfico para a posição do cursor com um leve deslocamento, para que o cursor do mouse não fique sobre o gráfico, mas ainda sobre a área de foco.

Eu fiz um violino aqui:http://jsfiddle.net/TimG/6XeWK/

Agora funciona tudo bem. O problema é justamente quando você move o mouse muito rápido, o cursor do mouse deixa a área flutuante e "desliza" sobre a imagem, o que torna impossível determinar a posição do mouse em relação à área de foco (mova-se muito rápido para a esquerda) na área de foco negro). Eu poderia tornar um pouco mais difícil de sair da área de foco, definindo o gráfico para

display: none;

antes que a posição css das imagens seja alterada e depois é alterada para

display: block;

novamente. Infelizmente isso não impede totalmente este problema.

Então: Existe alguma maneira de evitar isso? Ou existe uma maneira de colocar o cursor do mouse por trás da mão? É como definir um z-index para o cursor do mouse (imagino que não seria possível, já que não é um elemento DOM)?

Thx por qualquer ajuda.