jQuery hover时如何仅触发当前悬浮图片对应overlay显示

你的代码存在两处语法和逻辑错误，导致无法定位到当前元素对应的遮罩层：

• 选择器中$(".projects-img, this")、$(".overlay, this")属于无效写法，jQuery无法识别这种脱离上下文的this，会直接全局匹配所有.overlay元素，默认操作第一个匹配节点，也就是第一张图的遮罩
• 事件回调使用箭头函数会改变this指向，回调内的this不会指向当前触发事件的DOM元素，无法拿到当前悬浮的图片节点

不要使用箭头函数写事件回调，在回调内通过当前触发事件的DOM元素，查找同级对应的.overlay节点单独操作，不要全局选中所有遮罩：

// 初始化隐藏所有遮罩
$(".overlay").hide();

// 鼠标移入显示当前对应遮罩
$(".projects-img").mouseover(function() {
  $(this).siblings(".overlay").show();
});

// 鼠标移出隐藏当前对应遮罩
$(".projects-img").mouseout(function() {
  $(this).siblings(".overlay").hide();
});

上面的写法把事件绑定在img标签上，当鼠标移动到弹出的遮罩文本上时，会触发mouseout导致遮罩反复闪烁，体验更好的写法是把事件绑定在外层公共容器.hold-img上，用mouseenter和mouseleave事件避免冒泡问题：

$(".overlay").hide();

$(".hold-img")
  .mouseenter(function() {
    $(this).find(".overlay").show();
  })
  .mouseleave(function() {
    $(this).find(".overlay").hide();
  });

这种写法下只要鼠标在单个项目卡片的范围内，遮罩就会保持显示，不会出现闪烁问题。

内容的提问来源于stack exchange，提问作者Bumboobee