如何让被覆盖元素与覆盖元素同时响应CSS hover选择器？

我完全懂你的需求——不想通过pointer-events: none废掉覆盖层的交互性，而是希望鼠标悬停时，覆盖层和被它盖住的下层元素都能各自触发hover状态。默认情况下浏览器的事件捕获机制会让上层元素“吃掉”所有鼠标事件，下层元素根本接收不到，所以得用点小技巧来实现这个效果。

下面是两种可行的解决方案，你可以根据自己的场景选择：

方案一：JavaScript 事件模拟（最灵活的方案） #

核心思路很简单：监听覆盖层的鼠标进出事件，手动同步下层元素的hover状态（通过添加/移除类来模拟），这样两边都能保持原生的交互性。

举个直观的示例：

<div class="underlay">我是被覆盖的下层元素</div>
<div class="overlay">我是覆盖层</div>

.underlay {
  width: 200px;
  height: 200px;
  background: #eee;
  position: absolute;
  top: 0;
  left: 0;
  transition: background 0.3s;
}
/* 用类来模拟hover状态，和原生hover样式保持一致 */
.underlay.hover, .underlay:hover {
  background: #ccc;
}

.overlay {
  width: 200px;
  height: 200px;
  background: rgba(255,0,0,0.2);
  position: absolute;
  top: 0;
  left: 0;
  transition: background 0.3s;
}
.overlay:hover {
  background: rgba(255,0,0,0.5);
}

const overlay = document.querySelector('.overlay');
const underlay = document.querySelector('.underlay');

// 鼠标进入覆盖层时，给下层元素加上hover类
overlay.addEventListener('mouseover', () => {
  underlay.classList.add('hover');
});

// 鼠标离开覆盖层时，移除下层元素的hover类
overlay.addEventListener('mouseout', () => {
  underlay.classList.remove('hover');
});

这样设置后，不管鼠标是直接悬停在下层元素上（触发原生hover），还是悬停在覆盖层上（触发覆盖层hover+下层模拟hover），两个元素都会同步呈现hover状态，完全符合你的需求。

方案二：CSS 兄弟选择器（仅限特定DOM结构） #

如果你的覆盖层和下层元素是相邻兄弟关系，并且DOM结构固定，也可以用纯CSS实现，但这种方法有局限性：只有当鼠标直接悬停在下层元素上时，才能联动覆盖层的hover效果；反过来鼠标悬停在覆盖层上时，下层元素还是接收不到事件。

示例代码：

<div class="container">
  <div class="underlay">我是被覆盖的下层元素</div>
  <div class="overlay">我是覆盖层</div>
</div>

.container {
  position: relative;
  width: 200px;
  height: 200px;
}
.underlay {
  width: 100%;
  height: 100%;
  background: #eee;
  position: absolute;
  top: 0;
  left: 0;
  transition: background 0.3s;
}
.overlay {
  width: 100%;
  height: 100%;
  background: rgba(255,0,0,0.2);
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none; /* 暂时放开让下层能接收鼠标事件 */
  transition: background 0.3s;
}

/* 当下层元素hover时，同时触发覆盖层的样式变化 */
.underlay:hover + .overlay {
  background: rgba(255,0,0,0.5);
}
.underlay:hover {
  background: #ccc;
}

如果你的场景需要双向的hover联动，还是方案一的灵活性更高。

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