title: For a div with a CSS-defined cursor, IE doesn't automatically reset the cursor if the mouse doesn't move while that div is made to hide
body: <p>I know that's a mouthful in the title, but here's what's happening...</p>
  
  <p>I'm using Eric Martin's <a href="http://www.ericmmartin.com/projects/simplemodal/" rel="nofollow">SimpleModal</a> plugin in my project. When a modal popup is shown, I want to show the cursor as busy, not on the popup itself but on the overlay for the background. This is fine; it works, I added <code>cursor:wait</code> to the overlay div's CSS, and I don't to talk about why I shouldn't use the busy cursor.</p>
  
  <p>The popup is shown when a webserive call beings and closes after some work is done (waiting for a webservice call to return -- it's initializing some things and takes a few seconds). So, if you have your mouse over the overlay, remaining still, and the popup is programmatically closed, the cursor remains busy until you move it, even though the container that had the cursor CSS defined for it is no longer under the mouse. This is not the case in Firefox.</p>
  
  <p>I can reproduce it with this very simply example. Click the button, move your mouse off of the button but not onto the popup (just on the overlay), remove your hand from the mouse so it doesn't move, and wait for the popup to close itself. The cursor doesn't return to the default cursor.</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;style type="text/css"&gt;
  
  #simplemodal-overlay {
      background-color: #000;
      cursor: wait;
  }
  
  #simplemodal-container {
      color: #fff;
      background-color: #333;
      border: 8px solid #444; 
      padding: 12px;
      width: 300px;
  }
  
  &lt;/style&gt;
  
  &lt;script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="http://simplemodal.googlecode.com/files/jquery.simplemodal.1.4.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  
  function modalTest() {
      showModal();
      setTimeout(function() {
          hideModal();
      }, 1500);
  }
  
  function showModal() {
      $("#sample").modal();
  }
  
  function hideModal() {
      $.modal.close();
  }
  
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;button id="actionbutton" onclick="modalTest();"&gt;Test&lt;/button&gt;
  
  &lt;div id="sample" style="display:none"&gt;
   &lt;h2&gt;Sample Data&lt;/h2&gt;
   &lt;p&gt;This is some sample data from the current page&lt;/p&gt;
   &lt;p&gt;You can press ESC to close this dialog or click &lt;a href="#" class="simplemodal-close"&gt;close&lt;/a&gt;.&lt;/p&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Does anybody have any suggestions? I've tried other things, like assigning and removing CSS classes to the body and using <code>body.wait { cursor: wait; }</code>, but for one, the same behavior occurs in IE when the CSS class is removed.</p>
  
  <p>If I could keep a solution in pure CSS that would awesome, but I'm open to anything else.</p>
  
  <p><strong>EDIT</strong>: </p>
  
  <p>Ok, I had a thought just as I was submitted this and tried it out, and it worked. I'm going to leave this question here in case somebody stumbles upon this. Here's the fix:</p>
  
  <pre><code>function hideModal() {
      $("#simplemodal-overlay").css("cursor","default");
      $.modal.close();
  }
  </code></pre>
  
  <p><strong>EDIT 2</strong>:</p>
  
  <p>IE also doesn't change to the wait cursor if the mouse isn't moving when the popup is shown. It would seem that IE ignores cursor CSS if the mouse isn't in motion.</p>