Javascript 覆盖光标位置

我希望在我停留在导航栏上时，覆盖E.clitri和E.clitx的函数，使光标位于背景圆的中间。有人能帮忙吗

const cursor=document.querySelector（'#cursor'）；
文档.添加的事件列表器（“mousemove”，函数（e）{
setAttribute（“style”，“top:”+（e.clientY-10）+“px；left:”+（e.clientX-10）+“px；”）
})
document.getElementById（“navbarimg”）.addEventListener（“鼠标悬停”，函数（e）{
cursor.classList.toggle（“悬停”）
})
document.getElementById（“navbarimg”）.addEventListener（“鼠标输出”，函数（e）{
cursor.classList.toggle（“悬停”）
})

body{边距：0；高度：100vh；背景：rgb（27,27,27）；}
#光标{宽度：30px；高度：30px；边框：2px实心灰色；边框半径：50%；位置：固定；过渡持续时间：100ms；过渡计时功能：缓解；}
#navbarimg{位置：绝对；顶部：50%；左侧：50%；变换：变换（-50%，-50%）；}
#光标悬停{宽度：100px；高度：100px；不透明度：0.1；背景色：灰色；}

光标

只需添加

转换：translate（-50%，-50%）到光标，不需要任何偏移


const cursor=document.querySelector（'#cursor'）；
文档.添加的事件列表器（“mousemove”，函数（e）{
setAttribute（“style”，“top:”+（e.clientY）+“px；left:”+（e.clientX）+“px；”）
})
document.getElementById（“navbarimg”）.addEventListener（“鼠标悬停”，函数（e）{
cursor.classList.toggle（“悬停”）
})
document.getElementById（“navbarimg”）.addEventListener（“鼠标输出”，函数（e）{
cursor.classList.toggle（“悬停”）
})
正文{
保证金：0；
高度：100vh；
背景：rgb（27,27,27）；
}
#光标{
宽度：30px；
高度：30px；
边框：2倍纯色灰色；
边界半径：50%；
位置：固定；
转换：翻译（-50%，-50%）；
过渡时间：100ms；
过渡定时功能：缓解；
}
#纳巴林格{
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
}
#光标悬停{
宽度：100px；
高度：100px；
不透明度：0.1；
背景颜色：灰色；
}

光标
只需添加
转换：translate（-50%，-50%）到光标，不需要任何偏移


const cursor=document.querySelector（'#cursor'）；
文档.添加的事件列表器（“mousemove”，函数（e）{
setAttribute（“style”，“top:”+（e.clientY）+“px；left:”+（e.clientX）+“px；”）
})
document.getElementById（“navbarimg”）.addEventListener（“鼠标悬停”，函数（e）{
cursor.classList.toggle（“悬停”）
})
document.getElementById（“navbarimg”）.addEventListener（“鼠标输出”，函数（e）{
cursor.classList.toggle（“悬停”）
})
正文{
保证金：0；
高度：100vh；
背景：rgb（27,27,27）；
}
#光标{
宽度：30px；
高度：30px；
边框：2倍纯色灰色；
边界半径：50%；
位置：固定；
转换：翻译（-50%，-50%）；
过渡时间：100ms；
过渡定时功能：缓解；
}
#纳巴林格{
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
}
#光标悬停{
宽度：100px；
高度：100px；
不透明度：0.1；
背景颜色：灰色；
}

光标