我正在使用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,所以建议表示赞赏.
解决方法
你的功能完美无缺！问题是叠加.你放置绝对,使它覆盖整个身体.所以,稍微更改你的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")
});
});
