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?

Why don't you simply hide the cursor and show a cursor icon on hover in the center? You won't be needing any js for that. — Aslam, Nov 25 '16 at 07:49
Exactly! Turns out I'm trying to complicate it when it can easily be done using some css. Thanks for your help :) — Techs, Nov 25 '16 at 07:51

skreborn · Answer 1 · 2016-11-25T07:50:32.860

3

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.

edited Nov 25 '16 at 07:50

answered Nov 25 '16 at 07:35

skreborn

2,133
2
16
27

Thanks @skreborn. Saw that example but didn't work with hover. Besides that I wanted to show the mouse pointer rather than hiding it. I'll try your suggestion, hiding the mouse pointer and adding an image to the button. Thanks – Techs Nov 25 '16 at 07:40
@Techs I have updated the answer to include a note about why it doesn't (and *shouldn't*) work just by hovering over an element. – skreborn Nov 25 '16 at 07:51

score 2 · Answer 2 · answered Nov 25 '16 at 08:02

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

Mouse pointer at center of button on hover

2 Answers2