无法让同一位置不同层级的两个元素触发Hover效果求助

我明白你遇到的痛点：绝对定位的列覆盖层和行元素重叠，导致hover事件被顶层元素拦截，而且CSS没法直接选中DOM结构在前的元素。这里有两个纯CSS的解决方案，不需要任何JavaScript：

方案一：利用:has()选择器（现代浏览器推荐） #

:has()是CSS中非常实用的父选择器，它能让我们根据子元素的状态来控制父容器内的其他元素，完美解决你DOM顺序导致的选择器问题。

调整后的完整CSS代码： #

body { 
  width: 100vw; 
  margin: 0; 
  padding: 0; 
  background-color: blue; 
  overflow: hidden; 
} 

h1, h2 { 
  font-family: sans-serif; 
  color: white; 
  text-align: center; 
} 

#container { 
  width: 80vw; 
  margin: auto; 
  height: auto; 
  background-color: rgb(123, 108, 160); 
  position: relative; 
  min-height: 375px; /* 确保容器高度覆盖所有行 */
} 

.row { 
  height: 125px; 
  margin: 0; 
  padding: 0;
} 

/* 统一行内列元素的基础样式 */
.row > div {
  height: 125px; 
  float: left; 
  width: 25%; 
  margin: 0; 
}

.one { background-color: white; }
.two { background-color: green; }
.three { background-color: white; }
.four { background-color: green; }

/* 行hover时所有子元素变红 */
.row:hover > div { 
  background-color: red; 
} 

/* 列覆盖层默认隐藏，使用visibility而非display，配合事件穿透 */
[id^="col"] { 
  visibility: hidden;
  position: absolute; 
  height: 100%; 
  width: 25%; 
  background-color: purple; 
  opacity: .7; 
  mix-blend-mode: hardlight; 
  pointer-events: none; /* 关键：让鼠标事件穿透到下方的行元素 */
}

/* 定位每一列的位置 */
#col1 { left: 0; }
#col2 { left: 25%; }
#col3 { left: 50%; }
#col4 { left: 75%; }

/* 当任意行的对应列被hover时，显示整列覆盖层 */
#container:has(.row .one:hover) #col1 {
  visibility: visible;
}
#container:has(.row .two:hover) #col2 {
  visibility: visible;
}
#container:has(.row .three:hover) #col3 {
  visibility: visible;
}
#container:has(.row .four:hover) #col4 {
  visibility: visible;
}

关键说明： #

1. visibility: hidden替代display: none：这样元素仍保留在文档流中（绝对定位不影响布局），且能通过CSS控制显示/隐藏，同时不会破坏hover事件的传递。
2. pointer-events: none：让列覆盖层不拦截鼠标事件，确保下方的行元素能正常触发hover效果。
3. :has()选择器：通过容器内子元素的hover状态，精准控制对应列覆盖层的显示，完美绕开DOM顺序限制。

方案二：调整DOM结构（兼容旧浏览器） #

如果需要兼容不支持:has()的老浏览器，可以把列覆盖层嵌入到对应行的列元素中，通过绝对定位实现整列覆盖：

修改后的HTML示例（以第一行为例）： #

<div class="row">
  <div class="one">
    <div id="col1"></div> <!-- 将列覆盖层放到对应列元素内部 -->
    <p>Week 1<br> May 7 <br> - <br> May 11 </p>
  </div>
  <div class="two">
    <div id="col2"></div>
    <ul>
      <li> Course introduction </li>
      <li> Internet Architecture </li>
      <li> Introduction to Javascript </li>
    </ul>
  </div>
  <!-- 其余列同理添加对应col元素 -->
</div>

配套CSS代码： #

/* 基础样式和方案一一致，仅修改以下部分 */

[id^="col"] { 
  display: none;
  position: absolute; 
  top: 0;
  bottom: 0;
  height: auto; /* 配合top/bottom自动匹配容器高度 */
  width: 25%; 
  background-color: purple; 
  opacity: .7; 
  mix-blend-mode: hardlight; 
  pointer-events: none;
}

#col1 { left: 0; }
#col2 { left: 25%; }
#col3 { left: 50%; }
#col4 { left: 75%; }

/* hover列元素时显示对应覆盖层，同时触发行hover效果 */
.row .one:hover #col1 {
  display: block;
}
.row .two:hover #col2 {
  display: block;
}
.row .three:hover #col3 {
  display: block;
}
.row .four:hover #col4 {
  display: block;
}

.row:hover > div {
  background-color: red;
}

关键说明： #

1. DOM结构调整：把列覆盖层作为对应列元素的子节点，这样可以直接通过子元素的hover控制覆盖层显示，无需跨层级选择。
2. top: 0; bottom: 0：让覆盖层自动拉伸至容器的上下边缘，实现整列覆盖的效果。
3. pointer-events: none：同样保证鼠标事件能穿透到下方的行元素，避免hover冲突。

两种方案都能实现你想要的效果：鼠标悬停在行内任意列元素时，该行所有元素变红，同时对应的整列覆盖层显示，完全不需要JavaScript。

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