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');