上层方形Div遮挡下层圆形Div的Hover效果问题（仅用CSS/HTML）

方案1：事件穿透（最简单，适用于上层无交互需求） #

给上层的红色方形添加pointer-events: none属性，让鼠标事件完全穿透到下方的圆形元素，这样圆形的hover效果就能正常触发：

/* 上层方形样式 */
.square {
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 100px;
  background-color: red;
  /* 关键属性：禁用自身的鼠标事件，让事件穿透到下层 */
  pointer-events: none;
}

/* 圆形样式 */
.circle {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: gray;
  transition: background-color 0.3s ease;
}

.circle:hover {
  background-color: blue;
}

方案2：保留上层交互的精准事件控制 #

如果后续需要上层元素保留部分交互，可通过clip-path定义上层元素的可交互区域，仅让指定区域拦截鼠标事件，其余区域穿透：

.square {
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 100px;
  background-color: red;
  /* 仅方形自身区域可响应鼠标事件，超出部分穿透 */
  clip-path: inset(0 0 0 0);
}

针对你实际场景中用skew/rotate分割的圆形，只需把clip-path替换为对应分割形状的路径即可，确保只有分割出来的区域会拦截事件，圆形其他区域正常触发hover。

方案3：合并元素（无额外上层元素，避免事件冲突） #

直接通过CSS裁剪/遮罩实现视觉遮挡，无需额外的上层div，让圆形本身成为完整的交互单元：

.circle {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: gray;
  transition: background-color 0.3s ease;
  /* 裁剪掉圆形上方100x100的区域，模拟上层方形遮挡效果 */
  clip-path: polygon(
    0 100px, 100px 100px, 100px 0, 0 0,
    0 100px, 200px 100px, 200px 200px, 0 200px
  );
}

.circle:hover {
  background-color: blue;
}

这种方法从根源上避免了元素层级导致的事件冲突，适合仅需视觉遮挡的场景。

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