Removing Class with Mouse Exit

问题

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/

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

回答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.

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

回答4:

You could use pure css

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

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

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

回答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/

回答7:

The actual mouse event you should be calling is onmouseout

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

来源：https://stackoverflow.com/questions/31318551/removing-class-with-mouse-exit

标签

jquery

mouseleave