如何通过.sub-menu:hover触发非相邻.overlay元素显示灰色遮罩？

嘿，这个需求我之前帮人解决过，咱们得先看这两个元素的DOM结构关系，分两种情况来处理：

情况1：.sub-menu和.overlay是同一父元素下的兄弟元素（.sub-menu在.overlay之前） #

这种情况纯CSS就能搞定！咱们可以用CSS的通用兄弟选择器 ~，它能选中当前元素之后所有同层级的兄弟元素，不管中间隔了多少其他元素。

把你现有的代码修改成这样就行：

.overlay { 
  position: relative; 
} 
.overlay:after { 
  position: absolute; 
  content:""; 
  top:0; 
  left:0; 
  width:100%; 
  height:100%; 
  opacity:0; 
  background: grey; 
  transition: 0.2s; 
} 
/* 核心修改：用.sub-menu的hover状态触发后续兄弟.overlay的遮罩显示 */
.sub-menu:hover ~ .overlay:after { 
  opacity: 0.9; 
}

原理很直观：当鼠标悬停在.sub-menu上时，选择器会定位到它后面所有同层级的.overlay元素，然后把伪元素的透明度改成0.9，配合transition就能实现平滑的淡入效果。

情况2：.sub-menu和.overlay不在同一父层级（比如分属不同容器） #

如果两个元素的DOM结构没有直接的兄弟关系（比如.sub-menu在导航栏容器里，.overlay在内容区容器里），纯CSS就没办法跨层级触发样式变化了，这时候得用JavaScript来实现：

步骤1：给遮罩加一个控制类 #

先修改CSS，用自定义类来控制遮罩的显示：

.overlay.show-overlay:after {
  opacity: 0.9;
}

步骤2：用JS监听鼠标事件 #

通过监听.sub-menu的鼠标进入/离开事件，动态给.overlay添加或移除控制类：

const subMenu = document.querySelector('.sub-menu');
const overlay = document.querySelector('.overlay');

subMenu.addEventListener('mouseenter', () => {
  overlay.classList.add('show-overlay');
});

subMenu.addEventListener('mouseleave', () => {
  overlay.classList.remove('show-overlay');
});

这种方式不管两个元素在DOM里的位置如何，只要能通过选择器找到它们，就能实现悬停触发的效果。

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