Mouse pointer at center of button on hover

Question

I have a set of buttons shown on the screen. I am trying to implement a function which executes upon hovering on a button (having a class 'button').

This function needs to display the mouse pointer at the center of the button, meaning that whilst the actual mouse pointer is on the button, the mouse pointer is displayed in the center of the button. I tried using the RequestPointerLock API but this hides the mouse pointer whereas I want it to be displayed and I believe it only works with the event handler onclick .

This is what I've done so far:

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();
}

Any ideas on how I can implement this please?

Answer 1

There is no way for you to set the position of the cursor using JavaScript. This goes against a number of security considerations . The best you can do is hide the cursor (with cursor: none on :hover , and draw a static image of one on the center of the button.

Please note that the inconsistency of the cursor icons on different systems will prove to be a problem if you choose to go down this path.

As it is with a few other JavaScript APIs, requestPointerLock doesn't work with events such as mouseover (not unlike requestFullscreen ). They need direct user interaction to work. An event such as mouseover would be exploited too easily.

The Pointer Lock API example uses a canvas to draw a circle to a canvas.

Answer 2

This might be helpful.

 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; } 

 <button>Here</button> 

Here is also the codepen: http://codepen.io/hunzaboy/pen/pNwOqZ