Question

在此代码中，取自Cocco's answer/jsFiddle中的this question，鼠标光标仅在鼠标悬停在progress div上时更改为“等待”样式。

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

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 example

鼠标光标仅在超过特定元素时更改

1 个答案: