Javascript 鼠标指针位于鼠标悬停按钮的中心

我有一组按钮显示在屏幕上。我试图实现一个函数，该函数在悬停在按钮上时执行（有一个类“button”）

此功能需要在按钮中心显示鼠标指针，这意味着当实际鼠标指针位于按钮上时，鼠标指针将显示在按钮中心。我尝试使用

RequestPointerLock

API，但这会隐藏鼠标指针，而我希望它能够显示出来，我相信它只适用于事件处理程序

onclick

这就是我到目前为止所做的：

var buttons = document.getElementsByClassName('button');
buttons.requestPointerLock = buttons.requestPointerLock || buttons.mozRequestPointerLock;
document.exitPointerLock = document.exitPointerLock || document.mozExitPointerLock;
document.addEventListener('pointerlockchange', lockChangeAlert, false);
document.addEventListener('mozpointerlockchange', lockChangeAlert, false);

function lockChangeAlert() 
{
    if (document.pointerLockElement === buttons || document.mozPointerLockElement === buttons) 
    {
        console.log('The pointer lock status is now locked');
        document.addEventListener("mousemove", updatePosition, false);
    } else 
    {
        console.log('The pointer lock status is now unlocked');  
        document.removeEventListener("mousemove", updatePosition, false);
    }
}

function updatePosition(e) 
{
}

buttons.onclick = function()
{
     buttons.requestPointerLock();
}

---

关于如何实现这一点，您有什么想法吗？

您无法使用JavaScript设置光标的位置。这违背了许多安全考虑。最好的方法是隐藏光标（在

：hover

上使用

cursor:none

，并在按钮中心绘制一个静态图像

请注意，如果您选择此路径，则不同系统上光标图标的不一致性将成为一个问题

与其他一些JavaScript API一样，

requestPointerLock

不适用于

mouseover

等事件（与之类似）。它们需要直接的用户交互才能工作。

mouseover

等事件很容易被利用

该示例使用画布在画布上绘制圆。

这可能会有所帮助

按钮{
背景：#333；
位置：相对位置；
颜色：#fff；
填充：40px 80px；
边界：无；
字体大小：32px；
}
按钮：悬停{
光标：无；
}
按钮：悬停：之后{
内容：''；
背景图像：url（“http://www.freeiconspng.com/uploads/original-file---svg-file-nominally-550--400-pixels-file-size-3--23.png");
宽度：48px；
高度：48px；
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
背景尺寸：包含；
背景重复：无重复；
}

---

这里

谢谢@skreborn。看到了这个例子，但没有使用hover。此外，我想显示鼠标指针，而不是隐藏它。我会尝试你的建议，隐藏鼠标指针并向按钮添加图像。Thanks@Techs我已经更新了答案，添加了一条注释，说明为什么它没有（也不应该）只需将光标悬停在元素上即可工作。为什么不将光标隐藏起来，并在鼠标中心的悬停处显示光标图标？这样做不需要任何js。没错！事实证明，我正在尝试将其复杂化，因为可以使用css轻松完成。感谢您的帮助：）