如何用jQuery实现鼠标移入隐藏上层Div、移出恢复显示功能？

我看你是想实现鼠标移入时隐藏上层半透明的.dimmer div，移出时恢复显示，但当前的jQuery代码没达到预期效果对吧？问题出在箭头函数的this指向上！

为什么原代码不生效？ #

箭头函数不会绑定自己的this，它会继承外层作用域的this。这里外层是$(document).ready()的回调函数，this指向的是document对象，所以$(this)根本不是你要操作的.dimmer元素，自然hide()和show()方法起不到作用。

修正方案一：使用普通函数表达式 #

把事件回调换成普通函数，此时this会绑定到触发事件的.dimmer元素：

$(document).ready(function() { 
  $('.dimmer').on('mouseenter', function(event) { 
    $(this).hide(); 
  }).on('mouseleave', function(event) { 
    $(this).show(); 
  }); 
});

修正方案二：使用event.currentTarget（保留箭头函数） #

如果坚持想用箭头函数，可以通过事件对象的currentTarget属性获取触发事件的元素：

$(document).ready(function() { 
  $('.dimmer').on('mouseenter', event => { 
    $(event.currentTarget).hide(); 
  }).on('mouseleave', event => { 
    $(event.currentTarget).show(); 
  }); 
});

额外提示：确保层叠关系正确 #

别忘了给父元素.experience设置position: relative，让.dimmer能通过绝对定位覆盖在它上层，CSS可以这样写：

.experience {
  position: relative; /* 作为子元素绝对定位的参照 */
  background: url("cmu-110.png") no-repeat center; 
  height: 110px;
  /* 补充宽度等其他样式 */
}

.dimmer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色遮罩 */
  transition: opacity 0.3s; /* 可选：添加过渡动画让显示隐藏更平滑 */
}

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