jquery – 使用鼠标退出删除类

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

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

我在这里做了一个小提琴.我正在学习jquery,所以建议表示赞赏.

http://jsfiddle.net/34h48148/

解决方法

你的功能完美无缺！问题是叠加.你放置绝对,使它覆盖整个身体.所以,稍微更改你的CSS,放置.pods和.col相对.

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

Updated Fiddle

我在你的函数上唯一要改变的是在同一个调用者上绑定两个事件：

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

原文地址：https://www.jb51.cc/jquery/178689.html