如何在Javascript的其他div中显示鼠标后面的圆圈的位置

我想在两个框中找到鼠标后面的圆的位置 以及圆离开它们时的位置。此外，当它（圆圈）变为红色方框时，圆圈颜色变为黑色，当它变为红色方框时，它的颜色变为红色，当它们都结束时，它的颜色变为蓝色

我已经包括了这张照片

window.addEventListener（“mousemove”，函数（e）{
设x=e.clientX；
设y=e.clientY；
让鼠标=“鼠标：+x+”+y；
document.getElementById（“mouseText”）.innerText=鼠标；
让circle=document.getElementById（“circleText”）；
设newX=e.clientX+5；
设newY=e.clientY+5；
让newCircle=“circle:+newX+”+newY；
document.getElementById（“circleText”）.innerText=newCircle；
设circle2=document.getElementById（“圆”）；
circle2.style.marginTop=`${newY}px`；
circle2.style.marginLeft=`${newX}px`；
});
移动鼠标的功能（e）{
var m_posx=0，
m_posy=0，
e_posx=0，
e_posy=0，
obj=这个；
//获取文档交叉浏览器上的鼠标位置
如果（！e）{
e=窗口事件；
}
如果（e.pageX | e.pageY）{
m_posx=e.pageX；
m_posy=e.pageY；
}else if（e.clientX | e.clientY）{
m_posx=
e、 客户端+
document.body.scrollLeft+
document.documentElement.scrollLeft；
m_posy=
e、 clientY+document.body.scrollTop+document.documentElement.scrollTop；
}
//获取文档中的父元素位置
if（对象抵销父对象）{
做{
e_posx+=obj.offsetLeft；
e_posy+=对象偏移；
}而（（obj=obj.offsetParent））；
}
//鼠标位置减去elm位置是相对于元素的鼠标位置：
dbg.innerHTML=
“X位置：”+（m_posx-e_posx）+“Y位置：”+（m_posy-e_posy）；
}

html{
位置：相对位置；
}
#圈{
宽度：15px；
高度：15px；
背景颜色：蓝色；
边界半径：50px；
位置：绝对位置；
}
#划船{
显示器：flex；
利润率：0.200px；
}
#黑色{
位置：相对位置；
宽度：250px；
高度：250px；
背景色：黑色；
边缘顶部：125px；
左边距：300px；
右：180px；
}
#红圈{
位置：绝对位置；
宽度：25px；
高度：25px；
背景色：红色；
边界半径：50px；
最高：50%；
左：45%；
}
#红字{
位置：相对位置；
宽度：250px；
高度：250px；
背景色：红色；
边缘顶部：125px；
右边距：150px；
}
#黑圈{
位置：绝对位置；
宽度：25px；
高度：25px；
背景色：黑色；
边界半径：50px；
最高：50%；
左：45%；
}

---

此脚本调整元素的位置和大小，并侦听蓝色圆圈何时落在这些区域。离开该区域后，颜色样式将返回其原始状态

蓝点位于区域中时的示例： 调整“运行代码段”屏幕的大小后，它可能无法正常工作。请复制代码并重试

var pos=5；//十）{
c、 style.backgroundColor='黑色'；
}
否则如果（blcT-posy&&blcL-posx）{
c、 style.backgroundColor='红色'；
}
否则{
c、 style.backgroundColor=''；
}
}
////////////////////////////////////////////////
window.addEventListener（“mousemove”，函数（e）{
设x=e.clientX；
设y=e.clientY；
让鼠标=“鼠标：+x+”+y；
document.getElementById（“mouseText”）.innerText=鼠标；
让circle=document.getElementById（“circleText”）；
设newX=e.clientX+pos；
设newY=e.clientY+pos；
让newCircle=“circle:+newX+”+newY；
document.getElementById（“circleText”）.innerText=newCircle；
设circle2=document.getElementById（“圆”）；
circle2.style.marginTop=newY+'px'；
circle2.style.marginLeft=newX+'px'；
changeColor（newY，newX）；//非常感谢。我很高兴我能提供帮助！：）如果您愿意，您可以将我的答案标记为接受答案并投赞成票