title: IE9 and 10 doesn't reflect javascript cursor change
body: <p>The following code sample adds a semi transparent 100% overlay when a button is clicked. The overlay remains until the mouse button is released. Here's what is supposed to happen:</p>
  
  <ul>
  <li><p>Click on the button and hold the mouse down.</p></li>
  <li><p>While the mouse is down press and release the shift key.  </p></li>
  <li><p>When it's pressed, a div area
  indicates this with the text "horizontal" and the cursor changes to
  e-resize. When shift is released, the div indicates "vertical" and
  the cursor changes to n-resize.</p></li>
  </ul>
  
  <p>In IE9/10, the text changes but the cursor remains the same. I've tried changing the key bind to the body level and to the overlay level but to no avail.</p>
  
  <p>Here's the code: (I tried putting it into jsfiddle and jsbin but for some reason they ignore the key presses completely).</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  
      &lt;style type="text/css"&gt;
          .overlay {
              background-color: rgba(0, 0, 0, 0.3);
              top: 0; bottom: 0; left: 0; right: 0; position: fixed;
              z-index: 999;
          }
          .vertical { cursor: n-resize !important; }
          .horizontal { cursor: e-resize !important; }
      &lt;/style&gt;
  
      &lt;script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js" type="text/javascript"&gt;&lt;/script&gt;
  
      &lt;script type="text/javascript"&gt;
          $(function () {
  
              $("#button1").mousedown(onButtonMouseDown);
  
              function onButtonMouseDown(e) {
  
                  var overlay;
  
                  overlay = $("body").after("&lt;div class=\"overlay\"&gt;&lt;/div&gt;").next();
                  overlay.addClass((e.shiftKey) ? "horizontal" : "vertical");
  
                  $(document).bind("keydown.ntextbox", function (e) {
                      if (e.which === 16) {
                          overlay.removeClass("vertical").addClass("horizontal");
                          $("#div1").html("horizontal");
                      }
                  });
  
                  $(document).bind("keyup.ntextbox", function (e) {
                      if (e.which === 16) {
                          overlay.removeClass("horizontal").addClass("vertical");
                          $("#div1").html("vertical");
                      }
                  });
  
                  overlay.mouseup(function (e) {
                      overlay.remove();
                      $(document).unbind(".ntextbox");
                      return false;
                  });
  
                  return false;
              }
  
          });
      &lt;/script&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div id="div1"&gt;...&lt;/div&gt;
      &lt;button id="button1"&gt;Click me&lt;/button&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>