如何覆盖悬停按钮的css cursor属性？

Question

我有<button>，当用户将鼠标悬停时，光标变为指针（通过CSS）。

当用户点击<button>时，所有页面的光标应变为wait（通过jQuery）。

但是，如果用户将光标保持在<button>内，它将保持为pointer。我该如何解决这个问题？

实例：http://jsfiddle.net/URuLa/

使用Chrome 36.0.1985.125（最新版本）进行测试

Answer 1

为html添加一个设置游标的类，并设置所有元素在html具有该类时也具有等待光标

CSS

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

然后而不是做

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

使用addClass将等待类添加到html

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

JSFiddle Demo

然后完成后只需使用removeClass删除类

Answer 2

您可以在click回调中更改按钮的光标属性。

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