Javascript 在mousemove上圈出以下div问题

目前，我有一些jQuery代码告诉一个名为

小圆圈的
div
跟随我的光标。我从中学到了如何做到这一点

为了满足自己的需求，我稍微修改了脚本。但是，当我向我的
容器
类添加另一个
大圆圈
时，会出现一个问题。似乎正在发生的是，不允许
小圆圈2
的
id
在
x
轴上的
大圆圈2
内部移动。我在想这和

var mouseXval = 0, mouseYval = 0, limitX = 120-30, limitY= 120-30;

limitX
和
limitY
值可能需要更改，因为我正在将另一个名为
big-circle2
的
div
添加到组合中。因此，我尝试了这种方法，将
60
添加到
limitX=120-60，limitY=120-60但唯一改变的是圆的位置<代码>小圆圈2
没有在
x
轴上跟随我的光标。仍然只有
y
轴

我认为可能的解决方案是在
limitX
和
limitY
轴内部进行的数学运算。另一个问题可能是试图在一个
容器中添加多个圆

这是我的建议

谢谢大家!
 Thax to@blex我能看到我的出发点。事实证明，
limitX
和
limitY
中的数学没有问题，这不是一个容器问题。我在想什么

问题出在
pageOffset
变量内部

// issue with selecting both classes
    var pageOffset = $(".big-circle, .big-circle2").offset();

这里的问题是选择两个
”.big circle、.big-circle2“
来触发
offset（）
方法。我不应该选择每个类然后应用
offset（）
而应该使用
this
关键字来触发我悬停的两个圆圈中的任何一个

// use `this` to trigger the elements I hover on
    var pageOffset = $(this).offset();

当用户将鼠标移动到
”上时。大圆圈、.big-circle2“
jQuery将触发一个回调函数，该函数将传递到
mousemove
事件。一旦我们的回调被触发，jQuery就会将当前作用域设置为发起事件的DOM元素，在本例中，这些元素是
.big-circle
和
.big-circle2
。所有这一切的酷之处在于，jQuery允许我们使用
this
关键字访问启动
mousemove
事件的元素

所以我们设置
var offsetPage=$（this.offset（）和我们的
大圆圈2
现在有一个小圆圈，下面是光标

// jQuery sets the scope of callback to `big-circle, big-circle2`
$(".big-circle, .big-circle2").mousemove(function(event){
// `this` accesses our elements 
var pageOffset = $(this).offset();
});

这能满足您的要求吗？是的@请解释为什么
var pageOffset=$（this.offset（）解决了这个问题？这是因为
这个
绑定了gobal对象吗？
$（这个）
将以您悬停的元素为目标，而不是像您使用
$（“.big-circle，.big-circle2”）
@blex great感谢您看到这一点：）