javascript - Trigger mouseenter when an animated element touches mouse -

i'm new web development , i'm building game in object avoid touching animated circles pointer. set mouseenter event (full jsfiddle below):

$("#"+circlename).mouseenter(function(){     $(this).attr("class", "redcircle");     }); 

this turns circles red when user moves pointer them. however, when mouse stationary, circles can pass through safely. there better way this?

by changing mouseenter event hover event, event triggered when animated circle touches stationary mouse. however, there seems delay. know why might be?

this sounds it's related issue found here, means may have related browser bug:

getting mouseenter event still mouse entering animated element

fiddle: http://jsfiddle.net/nbsteuv/6yok3s56/4/

i store last mouse position , whenever circle moves, check whether has intersected mouse position.

var mousex, mousey;  $( "#container-element-id" ).mousemove(function( event ) {   mousex = event.pagex;   mousey = event.pagey; }); 

define function calculate whether point in circle ...

function ispointincircle(px, py, cx, cy) {     // math here } 

then, in animation code, whenever circle moves, check if there's intersection ...

if(ispointincircle(mousex, mousey, circle.left, circle.top)) {     // color circle red }