javascript - 鼠标光标仅在特定元素上更改

Question

在这段代码中，取自Cocco 的 answer/jsFiddle in this question，鼠标光标只有在鼠标悬停在progressdiv 上时才会变为“等待”样式。

为什么会这样，以及如何使光标成为整个页面的等待样式，直到操作完成？

HTML：

<button type="button" id="gogogo">Go!</button>
<div id="progress">0</div>

Javascript：

(function (W) {
    W.onload = function () {
        var D = W.document,
            a = 0,
            c = D.getElementById('progress');

        function b() {
            c.innerText = a + 1;
            a++;
            if (a < 3000) {
                requestAnimationFrame(b);
            } else {
                D.body.style.cursor = 'default';
            }
        }

        function start() {
            D.body.style.cursor = 'wait';
            b()
        }
        D.getElementById('gogogo').onclick = start;
    }
})(window)

Answer 1

嗯，那是因为你的身体只有大约 40 像素高。添加：

body, html {
    height:100%;
    padding:0;
    margin:0;
}

占据浏览器的高度。

jsFiddle 示例