jQuery div that follows cursor movement only within another div

Question

I want to be able to have a div which when the mouse is inside that div i get a small circular marker next to the cursor. When i move outside of this div the cursor marker is removed and is hidden.

I have found an example of what i want but not exactly what i need: -

http://jsfiddle.net/3964w/3/

Issues with the above: - I only want the yellow marker to appear when im inside that div - When im outside that div the marker is hidden and cursor is normal. - The marker is too far away from the cursor when i move the mouse around

Any ideas?

var mouseX = 0, mouseY = 0, limitX = 150-15, limitY = 150-15;
$(window).mousemove(function(e){
 mouseX = Math.min(e.pageX, limitX);
 mouseY = Math.min(e.pageY, limitY);
});

// cache the selector
var follower = $("#follower");
var xp = 0, yp = 0;
var loop = setInterval(function(){
// change 12 to alter damping higher is slower
xp += (mouseX - xp) / 12;
yp += (mouseY - yp) / 12;
follower.css({left:xp, top:yp});

}, 30);

Thanks

Answer 1

Can't you use css? Something like this: http://jsfiddle.net/felipemiosso/3964w/30/

Just added display:none; on #follower and created a new style .centerdiv:hover #follower { display:block; }

To get the pointer fixed when the cursor stops, add margin-left:-8px; margin-top:-8px; to the #follower.

Updated fiddle http://jsfiddle.net/felipemiosso/3964w/35/

Updated fiddle 2 http://jsfiddle.net/felipemiosso/3964w/41/

Answer 2

You can do something like, add display: none to the follower css and then: http://jsfiddle.net/3964w/32/

$('.container').mousemove(function(e){
$("#follower").show();
  var offset = $('.container').offset();

   mouseX = Math.min(e.pageX - offset.left, limitX);
   mouseY = Math.min(e.pageY - offset.top, limitY);
   if (mouseX < 0) mouseX = 0;
   if (mouseY < 0) mouseY = 0;
});

$('.container').mouseleave(function() {
        $("#follower").hide(); 
});    

Answer 3

the issue is in setInterval function which is called every 30msec use the onmousemove when in div to get coordiantes. and show follower on mouseenter. hide on mouseleave