僅當特定元素超過鼠標光標時才更改

Question

在此代碼中，取自Cocco's answer/jsFiddle,this question，當鼠標懸停在progress格上時，鼠標光標僅更改爲「等待」樣式。

爲什麼要這樣做，以及如何使它成爲整個頁面上的等待樣式，直到操作完成？

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