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

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 3

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 4

You could use pure css

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

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

Answer 5

Actualy, the code is working, the problem is that you set the even on the ".pods" class which cover the whole page... So the even is only triggered when you mouse out of the page

Answer 6

learning jquery, so advice is appreciated.

jQuery not needed to achieve requirement. Try utilizing css pseudo class :hover

.pod {
    width: 250px;
    height: 250px;
    background-color: blue;
    float: left;
}
.pod-overlay {
    display: none;
    z-index: 2;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: #fff;
    background-color: rgba(255, 255, 255, .9)
}

.pods .col:hover .pod-overlay  {
    display:block;
}

<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>

jsfiddle http://jsfiddle.net/34h48148/11/

Answer 7

The actual mouse event you should be calling is onmouseout

$(".pods .col").on("mouseout", function() {
  $(this).find(".pod-overlay").removeClass("show")
});