Question

屏幕上显示一组按钮。我正在尝试实现一个在鼠标悬停时执行的函数（具有类'按钮'）。

此功能需要在按钮的中心显示鼠标指针，这意味着当实际鼠标指针在按钮上时，鼠标指针显示在按钮的中心。我尝试使用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();
}

关于如何实现这一点的任何想法？

Answer 1

使用JavaScript设置光标位置无法。这违背了许多安全注意事项。您可以做的最好的事情是隐藏光标（cursor: none上的:hover，并在按钮的中心绘制一个静态图像。

请注意，如果您选择沿着这条路走下去，不同系统上光标图标的不一致将会成为一个问题。

与其他一些JavaScript API一样，requestPointerLock不能处理mouseover等事件（与requestFullscreen不同）。他们需要直接的用户交互才能工作。诸如mouseover之类的事件将被轻易利用。

Pointer Lock API示例使用画布将圆圈绘制到画布上。

Answer 2

这可能会有所帮助。

＆＃13;

button {
  background: #333;
  position: relative;
  color: #fff;
  padding: 40px 80px;
  border: none;
  font-size: 32px;
}
button:hover {
  cursor: none;
}
button:hover:after {
  content: '';
  background-image: url("http://www.freeiconspng.com/uploads/original-file---svg-file-nominally-550--400-pixels-file-size-3--23.png");
  width: 48px;
  height: 48px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-size: contain;
  background-repeat: no-repeat;
}

＆＃13;

<button>Here</button>

＆＃13;

以下是codepen：http://codepen.io/hunzaboy/pen/pNwOqZ

悬停在

2 个答案: