pointer-events:none下hover触发底层元素样式变更失效问题排查

我有四个重叠元素，从下到上初始透明度设置如下：

• 第1个id元素（#background）：opacity: 0
• 第2个id元素（#animation）：opacity: 0
• 第3个div元素（.squares）：opacity: 1
• 第4个text元素（.text）：opacity: 1

需求是：当hover第2个id元素（#animation）时，透明度变更为：

• 第1个id元素：opacity: 1
• 第2个id元素：无要求
• 第3个div元素：opacity: 1
• 第4个text元素：opacity: 0

为了让hover能作用在被上层元素覆盖的#animation上，我给第3、4个元素设置了pointer-events: none，但样式没按预期变化，想问是不是pointer-events: none导致的？

用户提供的CSS代码：

body {
  position: relative;
  width: 100vw;
  height: 100vh;
  background-color: rgb(234, 255, 248);
  justify-content: center;
}

#background {
  position: absolute;
  background-color:rgb(255, 125, 125);
  width: 300px;
  height: 90px;
  opacity: 0;
}

#animation {
  position: absolute;
  background-color: rgb(25, 138, 0);
  width: 200px;
  height: 50px;
  opacity: 0;
}

.squares {
  position: absolute;
  background-color: purple;
  height: 30px;
  width: 50px;
  opacity: 1;
}

.A {
  color: aliceblue;
}

.text {
  position: absolute;
  color: red;
  pointer-events: none;
}

.squares:hover ~ #background {
  opacity: 1;
}

.squares:hover ~ #animation {
  opacity: 1;
}

.squares:hover ~ .text {
  opacity: 0;
}

用户提供的HTML代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
<body>
<div class="c">
  <div class="squares">
    <div class="A">13</div>
     </div>
  <div id="background">11</div>
  <div id="animation">11</div>
          <div class="text">
            PARTICIPATE TO VIEW IMGS
          </div>
        </div>
    </body>
</html>

不是pointer-events: none导致的问题，核心问题出在选择器逻辑、元素堆叠顺序和布局细节上：

1. 选择器完全不符合需求 #

你写的CSS监听的是.squares的hover事件，但需求是hover#animation时触发样式，两者完全不匹配。另外，CSS的兄弟选择器~只能选择当前元素之后的兄弟，无法选择之前的，所以你原本写的.squares:hover ~ #background虽然语法正确，但和你要触发的目标元素逻辑完全相反。

2. 元素堆叠顺序与pointer-events设置遗漏 #

• 绝对定位元素的堆叠顺序默认由HTML书写顺序决定：后写的元素层级更高。你描述的从下到上顺序（#background < #animation < .squares < .text）和实际默认顺序不符，需要用z-index明确指定层级。
• 你只给.text设置了pointer-events: none，但如果.squares在#animation上层（按你需求的堆叠顺序），必须给.squares也加上pointer-events: none，才能让鼠标事件穿透到下面的#animation。

3. 布局细节缺失 #

body上的justify-content: center不会生效，因为没有设置display: flex，导致元素无法居中，可能影响你对hover区域的判断。

修正后的代码示例 #

调整后的HTML（修正兄弟元素顺序，让#background在#animation之后）

<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="c">
  <div class="squares">
    <div class="A">13</div>
  </div>
  <div id="animation">11</div>
  <div id="background">11</div>
  <div class="text">
    PARTICIPATE TO VIEW IMGS
  </div>
</div>
</body>
</html>

修正后的CSS

body {
  position: relative;
  width: 100vw;
  height: 100vh;
  background-color: rgb(234, 255, 248);
  display: flex; /* 让justify-content生效 */
  justify-content: center;
  align-items: center; /* 垂直居中，可选 */
}

/* 父容器设为相对定位，确保子元素绝对定位基于此 */
.c {
  position: relative;
}

#background {
  position: absolute;
  background-color:rgb(255, 125, 125);
  width: 300px;
  height: 90px;
  opacity: 0;
  z-index: 1; /* 最下层 */
}

#animation {
  position: absolute;
  background-color: rgb(25, 138, 0);
  width: 200px;
  height: 50px;
  opacity: 0;
  z-index: 2; /* 在#background上层 */
}

.squares {
  position: absolute;
  background-color: purple;
  height: 30px;
  width: 50px;
  opacity: 1;
  z-index: 3; /* 在#animation上层 */
  pointer-events: none; /* 鼠标事件穿透到下层#animation */
}

.A {
  color: aliceblue;
}

.text {
  position: absolute;
  color: red;
  pointer-events: none;
  z-index: 4; /* 最上层 */
}

/* 监听#animation的hover事件，控制后续兄弟元素 */
#animation:hover ~ #background {
  opacity: 1;
}

#animation:hover ~ .text {
  opacity: 0;
}

修正说明 #

1. 用z-index明确指定堆叠顺序，完全匹配你描述的从下到上层级。
2. 给.squares添加pointer-events: none，确保鼠标能穿透到下层的#animation。
3. 修正CSS选择器，监听#animation的hover事件，通过兄弟选择器控制后续的#background和.text。
4. 给body添加display: flex，让居中属性生效，避免元素位置混乱。

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