Javascript 如何更改光标'；s基于光标的外观'；什么地方？

我试图将光标在屏幕左半部分的外观更改为左箭头，在屏幕右半部分的外观更改为右箭头。具体来说，我想知道如何使用Javascript实现这一点。看起来像的东西

尝试根据鼠标位置和整个页面宽度（即，如果x-mouselocation>页面宽度：更改为右光标）来执行此操作。但无法让它工作

---

有什么建议吗？

如果您不想要任何动画，您可以简单地执行以下操作：

*{
保证金：0；
}
身体{
背景色：#111；
}
.集装箱{
高度：100vh；
宽度：100vw；
溢出：隐藏；
显示：网格；
放置项目：中心；
}
.形象{
高度：60vh；
宽度：60vw；
背景图像：url（“https://source.unsplash.com/cUpp1gAEtiU/");
背景重复：无重复；
背景尺寸：封面；
背景位置：中心；
/*您引用的网站基本上有一组嵌套的div。最里面的div只是在鼠标悬停在每一侧时显示一个图像

你可以设置类似的东西


。左，
.对{
显示：无；
位置：固定；
身高：85%；
宽度：51vw；
光标：无！重要；
.左.内，
.对，内部{
位置：相对位置；
身高：100%；
宽度：100%；
}
我使用JS检查鼠标在页面的哪一侧，然后将类应用于两种情况下的元素


const wrap=document.querySelector（'.wrap'）；
addEventListener（'mousemove'，e=>{
//获取主体的宽度并将其除以2
constwidth=+getComputedStyle（document.body）.width.slice（0，-2）/2；
wrap.classList.remove（'mouse-left'，'mouse-right'）；//删除鼠标类
wrap.classList.toggle（'mouse-left'，e.pageX width）；//如果鼠标位置在右侧，则切换鼠标右键
})；
正文{
背景图像：线性梯度（向右，#8360c3 49.9%，#2ebf91 50%）；
宽度：100%；
身高：100%；
}
.包裹{
宽度：100%；
身高：100%；
位置：绝对位置；
排名：0；
左：0；
z指数：10；
}
.鼠标右键{
cursor:url（“数据：image/svg+xml；utf8，所以在鼠标移动时更改类？或者仅仅根据元素悬停来更改光标…您的页面是按列排列的吗？”？