Javascript mousemove函数，用于显示元素未按预期工作

我正在尝试使用mousemove函数来显示我在特定div内移动鼠标时创建的自定义光标元素。自定义光标是我希望它出现在其中的div中的绝对定位div。我看到的最有趣的事情是，我可以从开发人员工具中看到，它实际上正在工作，但自定义光标实际上没有显示出来。但是，如果我将自定义光标div移到div之外，我希望它进入主体，它会显示良好

我知道这一定是我的一个简单错误，但我看不出来！谢谢你的建议

让customCursor=document.querySelector'.customCursor'； const section2=document.querySelector'.section2'； 第2节.添加EventListener'mousemove'，函数E{ customCursor.classList.add'active'； customCursor.setAttributestyle，顶部：+e.pageY+px；左侧：+e.pageX+px；； }; 第2节添加了“鼠标删除”功能{ customCursor.classList.remove'active'； }; .科{ 位置：相对位置； } .第1节{ 高度：500px； } .第2节{ 高度：500px； } .自定义光标{ 宽度：50px； 高度：50px； 背景：黑色； 边界半径：50%； 显示：无； 位置：绝对位置； } .custom-cursor.active{ 显示：块； } 第一节 第二节 是相对于父对象的，如果父对象具有

position:relative

因此，为了在Section 2中获得正确的位置，您需要使用e.layerY和e.layerX而不是e.pageY和e.pageX，因为它们基于屏幕的左上角。e、 layerY和e.layerX与mouseevent所连接的容器相关

---

试试这个：

像@Titus comment一样，您可以将CSS与游标一起使用

但是，如果使用需要跟踪鼠标相对于section2的位置的JS来实现，则需要减去section2元素左上偏移量，然后减去光标宽度和高度的一半以使光标居中：

让customCursor=document.querySelector'.customCursor'； const section2=document.querySelector'.section2'； 第2节.添加EventListener'mousemove'，函数E{ customCursor.classList.add'active'； customCursor.setAttributestyle，顶部：+e.pageY-section2.offsetTop-customCursor.offsetWidth/2+px；左侧：+e.pageX-section2.offsetLeft-customCursor.offsetlight/2+px；； }; 第2节添加了“鼠标删除”功能{ customCursor.classList.remove'active'； }; .科{ 位置：相对位置； } .第1节{ 高度：500px； } .第2节{ 高度：500px； } .自定义光标{ 宽度：50px； 高度：50px； 背景：黑色； 边界半径：50%； 显示：无； 位置：绝对位置； } .custom-cursor.active{ 显示：块； } 第一节 第二节

---

您可以使用CSS通过设置属性来实现这一点。@dave Newton，恐怕fiddle不起作用，谢谢though@rufus你的光标在那里，它只是向下移动，因为它在你的500px下section@rufus小提琴很好，这是你的代码，我唯一改变的是div的高度，所以它们实际上是可见的。我要指出的是，它的工作方式与您的编码方式完全相同，您只是不想要您实际编写的内容，也不清楚您真正想要的是什么。谢谢您，看起来它做得很好！谢谢你的帮助很高兴它的帮助，我忘了减去光标宽度和高度的一半，更新了我的答案

position:relative