So this is what I got.

 <div class="box"></div>

---

 .box {
 position: absolute;
 left: 0;
 top: 0;
 width: 100px;
 height: 100px;
 background: yellow;
 }

---

 $(document).bind('mousemove', function(e){
 $('.box').css({
 top: e.pageY
 left:  e.pageX,
 });
 });

It works. The box follow the cursor. Problem is it follow the EDGE of the cursor. ie, the cursor holds the top left corner of the box. I want it to hold the center of the box, or another point that's not the edge. Any ideas how to do that?

Sorry if this dumb. I'm good enough with HTML/CSS but just starting with javascript and jQuery.

So this is what I got.

 <div class="box"></div>

---

 .box {
 position: absolute;
 left: 0;
 top: 0;
 width: 100px;
 height: 100px;
 background: yellow;
 }

---

 $(document).bind('mousemove', function(e){
 $('.box').css({
 top: e.pageY
 left:  e.pageX,
 });
 });

It works. The box follow the cursor. Problem is it follow the EDGE of the cursor. ie, the cursor holds the top left corner of the box. I want it to hold the center of the box, or another point that's not the edge. Any ideas how to do that?

Sorry if this dumb. I'm good enough with HTML/CSS but just starting with javascript and jQuery.

• javascript
• jquery

Share Improve this question Follow asked Nov 3, 2016 at 5:27 Magdi GamalMagdi Gamal 67811 gold badge1212 silver badges2828 bronze badges 1

• there is an error on your line of codes there should be a ma after the pageY – Rani Moreles Rubillos Commented Nov 3, 2016 at 5:33

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

Use this code instead

 $(document).bind('mousemove', function(e){
   $('.box').css({
     top: e.pageY - $(".box").height()/2, // just minus by half the height
     left:  e.pageX - $(".box").width()/2 // just minus by half the width
   });
 });