使用鼠标退出删除类 [英] Removing Class with Mouse Exit

问题描述

我正在使用jQuery在mouseenter/mouseleave上执行操作，它似乎正在工作，但是当我退出div时不起作用.这仅在退出实际窗口时有效.

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.

这是我的jQuery

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

这是我的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>

我在这里做了一个js小提琴.我正在学习jquery，因此请多加指教.

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

http://jsfiddle.net/34h48148/

推荐答案

您的功能非常完美！问题是覆盖.您放置该绝对值，使其覆盖整个身体.因此，稍微改变一下CSS，将.pods和.col相对放置.

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

更新的小提琴

我要对函数进行的唯一更改是将两个事件绑定到同一调用者上:

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

这篇关于使用鼠标退出删除类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！