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: -

/

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

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/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

• javascript
• jquery
• html
• css

5 Answers 5

Can't you use css? Something like this: http://jsfiddle/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/felipemiosso/3964w/35/

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

You can do something like, add display: none to the follower css and then: http://jsfiddle/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(); 
});    

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

change container css properties

.anyclass{
    cursor: URL("smallcircle.png");
 }

You can use this library, i found it really good. http://www.tippedjs./