Div absoluta sigue parpadeando si muevo mi ratón

Esto es lo que he logrado hasta ahora:

introduzca la descripción de la imagen aquí

Aparecerá un div en el puntero de mi mouse si muevo mi mouse a cualquier imagen roja.

Aquí están mis códigos:

HTML

 
name:blahblah
name:blahblah
name:blahblah

CSS

 .cclass { position:absolute; background-color:orange; height:125px; width:175px; top:0px; left:0px; display:none; } 

JQuery

 $('img#sorc').on('mousemove mouseleave',function (e) { if (e.type == 'mouseleave'){ $('div#test').css('display', 'none'); } else { $('div#test').css({ 'display': 'block', 'top': e.pageY, 'left': e.pageX }); } }); 

Funciona según lo previsto, pero el problema es que el div sigue parpadeando. ¿Qué debo hacer para evitar eso?

editar:

Este es el código para mi caja roja:

  

Proporcionar un pequeño espacio entre el cursor y la posición de la casilla resuelve el problema. En el siguiente fragmento, he establecido un espacio de 15px en el eje X.

 $('img#sorc').on('mousemove mouseleave', function(e) { if (e.type == 'mouseleave') { $('div#test').css('display', 'none'); } else { $('div#test').css({ 'display': 'block', 'top': e.pageY, 'left': e.pageX + 15 }); } }); 
 .cclass { position: absolute; background-color: orange; height: 125px; width: 175px; top: 0px; left: 0px; display: none; } 
   
name:blahblah
name:blahblah
name:blahblah

Creado un violín para usted problema

Modificó un poco su código HTML. agregó un padre y se le dio una posición como relativa a ese padre.

 
name:blahblah
name:blahblah
name:blahblah

Lo único es que su mouse está interfiriendo con su imagen blaah, agregue un margen suficiente a la posición del cursor, p. E.pág. + 10, e.páginaX + 10, o como se menciona en una de las respuestas, su pariente

 $('img#sorc').on('mousemove mouseleave', function(e) { if (e.type == 'mouseleave') { $('div#test').css('display', 'none'); } else { $('div#test').css({ 'display': 'block', 'top': e.pageY, 'left': e.pageX }); } }); 
 .container { position: relative; } .cclass { position: absolute; background-color: orange; height: 125px; width: 175px; top: 0px; left: 0px; display: none; } 
  
name:blahblah
name:blahblah
name:blahblah

puedes hacer esto

 $('#sorc').on('mousemove mouseleave',function (e) { if (e.type == 'mouseleave'){ $('div#test').css('display', 'none'); } else { $('div#test').css({ 'display': 'block', 'top': e.pageY, 'left': e.pageX }); } }); 

aquí mi violín