如何用纯CSS实现鼠标悬停重叠区域时同时触发两个元素的hover状态

AI 小北

2026-4-28

纯CSS实现重叠元素同时触发hover状态的方案

当然可以做到！默认情况下，浏览器的鼠标事件只会被最上层的元素“截胡”，下层元素根本感知不到鼠标在上面，但咱们用纯CSS就能解决这个问题——核心就是利用现代浏览器支持的:has()选择器，完全不需要写JavaScript。

核心思路

咱们的目标是：当鼠标悬停在两个方块的重叠区域时，蓝色方块（.b）和红色方块（.c）同时触发hover变白的效果。具体做法是：

当鼠标悬停在.c上时，让.b也应用hover样式；
当鼠标悬停在.b上时，让.c也应用hover样式；
这样不管鼠标在重叠区的哪一侧，两个元素的hover状态都会同时被触发，非重叠区域则各自正常响应hover。

完整代码实现

先看HTML结构（和你的代码完全一致）：

<div class="a">
  <div class="b">b</div>
  <div class="c">c</div>
</div>

再看修改后的CSS：

.a {
  position: relative;
}

.b, .c {
  width: 40px;
  height: 40px;
  position: absolute;
}

.b {
  top: 5px;
  left: 5px;
  background-color: blue;
}

.c {
  top: 25px;
  left: 25px;
  background-color: red;
}

/* 扩展hover触发条件 */
.b:hover,
.a:has(.c:hover) .b {
  background-color: white;
}

.c:hover,
.a:has(.b:hover) .c {
  background-color: white;
}

代码解释

我们把原本单一的.b:hover样式，扩展成了两个触发条件：要么.b自身被鼠标hover，要么父元素.a里面的.c被hover时，.b都会变成白色背景；
同理，.c的hover样式也做了同样的扩展；
当鼠标在重叠区域时，最上层的.c会先触发hover，同时通过:has()选择器让.b也应用hover样式，两个方块就同时变白了；非重叠区域则各自正常响应，完全符合你的需求。