마우스 커서가 특정 요소 위에있을 때만 변경됨

Question

Cocco's answer/jsFiddle에서 this question으로 가져온이 코드에서 마우스가 progress div 위로 마우스를 가져 가면 마우스 커서가 "대기"스타일로만 변경됩니다.

왜 그런가? 그리고 작업이 완료 될 때까지 커서가 해당 페이지 전체의 대기 스타일이되도록 만드는 이유는 무엇입니까?

는

HTML :

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

자바 스크립트 : 당신의 몸은 약 40px 높이 때문에

(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

글쎄, 그건. 추가 :

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

브라우저의 높이를 차지합니다. 대신 오버 플로우를 숨기는

jsFiddle example