How do I force the mouse cursor to change without a mouse movement in Javascript?

Question

In my webpage, testing on Chrome, I have a button div. The button is styled so that it has a hover state in a different colour, and a hand-shaped mouse pointer. All this is fine.

When the button is pressed, it triggers an animation, and I don't want to let the user press the button again until it's done, so I put a semi-opaque div over the top to block the button.

The problem comes when the animation completes and the div is removed. The mouse pointer is over the button but the hover state isn't active until the user actually moves the mouse, then the mouse pointer changes and all is well.

Note that the click still works - this is a purely cosmetic (but annoying) aberration.

Can I force the browser to re-evaluate the point under the cursor?

Answer 1

The correct way to prevent input to a button is to disable it. You can toggle the cursor style with the CSS cursor property.

Javascript:

var theButton = document.getElementById('theButton');
    theButton.disabled = true;
    theButton.setAttribute('style','cursor:default;');

// animation is complete

theButton.disabled = false;
theButton.removeAttribute('style');

jQuery:

var $theButton = $('#theButton').prop('disabled',true).css('cursor','default');

// animation is complete

$theButton.prop('disabled',false).css('cursor','pointer');

Answer 2

Check the position of the mouse when the animation ends and you remove the div, or just always store them and check that value when it ends to see if the cursor is still over your button. You could do this with event.clientX, event.clientY or event.pageX, event.pageY something similar to those(not completely sure just did some quick research but those seemed to work in chrome,IE, and firefox). Then if the mouse is still over the button, trigger the on.hover for the button element again.