如何覆盖悬停按钮的CSS光标属性？

Question

I have a <button> , when the user hover it, the cursor become pointer (via CSS).

When the user click on the <button> , the cursor of all the page should become wait (via jQuery).

However, if the user keeps the cursor inside <button> , it will stay as pointer . How can I fix this ?

Live example : http://jsfiddle.net/URuLa/

Tested with Chrome 36.0.1985.125 (last version)

Answer 1

Add a class for html that sets the cursor and sets all elements to also have the wait cursor when html has that class

CSS

html.wait, html.wait * {
   cursor:wait;
}

then instead of doing

$('html').css("cursor","wait");

use addClass to add the wait class to html

$('html').addClass("wait");

JSFiddle Demo

Then when done just use removeClass to remove the class

Answer 2

You can change the cursor property for your button in the click callback.

$(document).ready(function(){
    $("button").click(function() {
        $('html').css('cursor','wait');
        $(this).css('cursor','wait');
    });
});