title: How to make JQuery .hover() work when mouse leaves viewport?
body: <p>The below code will put a div at the very top of the view port.</p>
  
  <p>The expected behavior is:</p>
  
  <p>When the user mouses over the div, then moves the mouse up until the cursor is out of the viewport, a message of "hover out" should be logged in the console. The issue is that nothing gets logged to the console.</p>
  
  <p>How can I make JQuery .hover() log something to the console when the mouse leaves viewport?</p>
  
  <pre><code>&lt;body style="margin: 0; padding: 0;"&gt;
    &lt;div class="foo" style="background-color: blue; width: 100px; height: 100px;"&gt;
      Test
    &lt;/div&gt;
    &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"&gt;&lt;/script&gt;
  
    &lt;script&gt;
  
      $(".foo").hover(function(){
          console.log("hover in");
      }, function(){
          console.log("hover out");
      });
  
     &lt;/script&gt;
  </code></pre>
  
  <p></p>