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/

Shanitashank

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

Molloy

Haha - Kirsty has accepted almost all the answers in turn today – Tidewaiter

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;
    ...
}

Philippians

@Tidewaiter This will work now. The real problem is from the width & height of the overlay, and not from the function (his function was working). Btw, your function didn't work either :3 – Philippians

I was using .on("hover") ! – Tidewaiter

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.

Peugia

This is the best answer. – Mohamedmohammad

Answer 4

You could use pure css

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

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

Banter

Hey Hacketo, asda.com/summer/index.html I was trying to recreate this, hence the jquery :) – Shanitashank

@KirstyMarks this can be done with pure css, but it seem they use javascript to do it – Banter

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

Kirst

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/

Execratory

Answer 7

The actual mouse event you should be calling is onmouseout

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

Citarella