Removing Class with Mouse Exit

Question

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.

This is my jQuery

$(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")
  });
});

This is my HTML

<div id="splash" class="section section-splash bg">
  <div class="pods">
    <div class="col col-4">
      <div id="pod-splash-food" class="pod pod-food">
        <div class="pod-overlay"></div>
      </div>
    </div>
  </div>
</div>

I have done a js fiddle here. I am learning jquery, so advice is appreciated.

http://jsfiddle.net/34h48148/

Answer 1

Your function works perfect! The problem is the overlay. You place that absolute, making it cover the whole body. So, change your CSS a bit, place .pods and .col relative.

.pods,.col { overflow: auto; position: relative; }

Updated Fiddle

The only thing I would change on your function, is binding both events on the same caller:

$(document).ready(function() {
    $(".pods .col").on("mouseenter", function() {
        $(this).find(".pod-overlay").addClass("show")
    }).on("mouseleave", function() {
        $(this).find(".pod-overlay").removeClass("show")
    });
});

Answer 2

You can also use hover event like this :

$(document).ready(function() {
  $(".pods .col").hover(function() {
    $(this).find(".pod-overlay").addClass("show")
  }, function() {
    $(this).find(".pod-overlay").removeClass("show")
  });
});

And this is the hover event doc

---

However, the problem is not the function but the CSS associated to the pod-overlay class.
Add these two attributes in your css :

.pod-overlay {
    width:260px;
    height:260px;
    ...
}

Answer 3

Your method is fine but you it doesn't work on mouseleave is because the overlay is on top of .col and hence mouseleave is never triggered. You can use pointer-events as well apart from what the other answers suggest. Something like this

.pod-overlay {
    pointer-events: none;
    ....
}

Here is the updated demo http://jsfiddle.net/dhirajbodicherla/34h48148/9/

PS: I changed the border of overlay only to show the overlay boundaries.

Answer 4

You could use pure css

.pods .col:hover .pod-overlay{
    visibility: visible;
}

.pods .col .pod-overlay{
    visibility: hidden;
}