title: Javascript drag and drop on leave doesn't work correctly
body: <p>I am trying to implement a drag and drop image upload similar functionality to imgur.com.
  You drag an image from your desktop and a big overlay div with the word 'upload' appears as you drag over your document.</p>
  
  <p>My problem is that when I drag over the actual word 'upload' inside an h1 tag the screen flickers. This is happening because I have an event for dragleave to remove the overlay div with the upload h1 tag however I don't know how to fix it.</p>
  
  <p>You can see the problem in action here: <a href="http://jsfiddle.net/JUBwS/7/" rel="nofollow">JS Fiddle</a>, just drag any image from your desktop to the document and hover over the word 'upload' you'll see what I'm talking about. Any help would be appreciated.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;Drag and Drop&lt;/title&gt;
          &lt;meta charset="utf-8"&gt;
          &lt;meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div id="upload-global-drop-overlay" style="display: none;"&gt;&lt;h1&gt;upload&lt;/h1&gt;&lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;​
  </code></pre>
  
  <p>Javascript code:</p>
  
  <pre><code>$(document).on('dragover', function () {
      $('#upload-global-drop-overlay').css({'display': 'block'});
  });
  
  
  $('#upload-global-drop-overlay').on('dragleave', function () {
      $('#upload-global-drop-overlay').css({'display': 'none'});
  });
  
  $(document).on('drop', function (e) {
      $('#upload-global-drop-overlay').css({'display': 'none'});
      e.preventDefault();
  });
  </code></pre>
  
  <p>​</p>