如何让设置position:absolute的子div不触发父div的:hover效果？

这不是HTML的继承机制，而是浏览器的事件触发规则：当鼠标悬停在一个元素的后代节点上时，无论该后代的视觉位置是否超出父元素，父元素的:hover状态都会被触发——因为DOM树的包含关系决定了状态的关联，和视觉上的位置无关。

图片说明：鼠标光标位于红色子div内部，但该子div在黑色父div的视觉边界之外，此时父div仍触发了:hover的橙色背景效果。

下面提供两种针对性的解决方案：

方案1：禁用子元素的鼠标事件（适合子元素无需交互的场景） #

给子元素添加pointer-events: none;，这样子元素不会响应任何鼠标事件，鼠标悬停在它上面时会直接“穿透”到下方元素，不会触发父元素的:hover状态。

修改后的CSS代码：

body {
  display: flex;
  align-items: center;
  justify-content: center;
}

.container {
  background-color: black;
  width: 800px;
  aspect-ratio: 1 / 1;
}

.container:hover {
  background-color: darkorange;
}

.child {
  position: absolute;
  background-color: red;
  width: 100px;
  height: 100px;
  transform: translate(-50px, 0px);
  pointer-events: none; /* 禁用鼠标事件 */
}

方案2：将子元素移出父元素DOM结构（适合子元素需要交互的场景） #

如果子元素需要响应点击、悬停等鼠标事件，就把它从父元素的内部移出来，变成同级元素，再通过绝对定位调整到目标位置。此时子元素不再是父元素的DOM后代，鼠标悬停时就不会触发父元素的:hover。

修改后的代码：

body {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative; /* 设置相对定位，作为子元素的定位基准 */
}

.container {
  background-color: black;
  width: 800px;
  aspect-ratio: 1 / 1;
}

.container:hover {
  background-color: darkorange;
}

.child {
  position: absolute;
  background-color: red;
  width: 100px;
  height: 100px;
  /* 调整位置到原视觉位置，可根据实际需求微调 */
  left: calc(50% - 450px);
  top: 50%;
  transform: translateY(-50%);
}

<div class="container"></div>
<div class="child"></div> <!-- 子元素移至父元素外部 -->

内容的提问来源于stack exchange，提问作者Kevin Mathias Bergan