使用鼠标退出删除类

我正在使用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

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

http://jsfiddle.net/34h48148/

Answer 1

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

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

更新小提琴

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

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

你的方法很好，但是你在mouseleave上不起作用是因为叠加在.col之上，因此永远不会触发mouseleave。 您可以使用pointer-events以及其他答案建议的内容。 像这样的东西

 .pod-overlay { pointer-events: none; .... } 

这是更新的演示http://jsfiddle.net/dhirajbodicherla/34h48148/9/

PS：我只更改了叠加边框以显示叠加边界。

Answer 3

你也可以像这样使用hover事件：

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

这是hover事件doc

---

但是，问题不是函数，而是与pod-overlay类关联的CSS。
在你的css中添加这两个属性：

 .pod-overlay { width:260px; height:260px; ... } 

Answer 4

你可以使用纯CSS

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

Answer 5

Actualy，代码正常工作，问题是你在覆盖整个页面的“.pods”类上设置了偶数…所以偶数仅在鼠标离开页面时触发

Answer 6

学习jquery，所以建议表示赞赏。

jQuery不需要实现需求。 尝试使用css伪类: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; } 

Answer 7

您应该调用的实际鼠标事件是onmouseout

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