title: Removing Class with Mouse Exit
body: <p>I am performing a on mouseenter / mouseleave with jQuery and it appears to be working but not when I exit the div. This is only working when I exit the actual window. </p>
  
  <p>This is my jQuery</p>
  
  <pre><code>$(document).ready(function() {
    $(".pods .col").on("mouseenter", function() {
      $(this).find(".pod-overlay").addClass("show")
    });
    $(".pods .col").on("mouseleave", function() {
      $(this).find(".pod-overlay").removeClass("show")
    });
  });
  </code></pre>
  
  <p>This is my HTML</p>
  
  <pre><code>&lt;div id="splash" class="section section-splash bg"&gt;
    &lt;div class="pods"&gt;
      &lt;div class="col col-4"&gt;
        &lt;div id="pod-splash-food" class="pod pod-food"&gt;
          &lt;div class="pod-overlay"&gt;&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I have done a js fiddle here. I am learning jquery, so advice is appreciated.</p>
  
  <p><a href="http://jsfiddle.net/34h48148/" rel="nofollow">http://jsfiddle.net/34h48148/</a></p>