CSS如何在hover不同父级的元素时修改另一div的display属性

问题根因 #

你写的选择器不生效是因为CSS本身的限制：CSS选择器只能选中当前元素的后代、同级后置的兄弟元素/兄弟元素的后代，既不能向上选中父元素，也不能选中位于当前元素前面的同级节点。
你现有结构里.pc-hover是父容器.profile-content的第一个子元素，而触发hover的img在.profile-content的第三个子元素内部，两者不存在同级后继的关系，所以+和~选择器都无法匹配到目标元素。

可选实现方案 #

方案1：纯CSS无需改结构（主流浏览器兼容）

用CSS :has() 伪类实现，目前Chrome 105+、Firefox 121+、Safari 15.4+都支持，适合不需要兼容老版本浏览器的场景：

.pc-hover {
  display: none;
}
/* 匹配内部存在hover状态img的.profile-content，再选中它下面的.pc-hover */
.profile-content:has(.pc-content-image img:hover) .pc-hover {
  display: block;
}

方案2：JS实现（全兼容）

如果需要兼容旧版本浏览器，可以用少量JS实现，不需要修改原有HTML结构：

/* 原有默认隐藏的样式保留 */
.pc-hover {
  display: none;
}

const triggerImg = document.querySelector('.pc-content-image img')
const targetHover = document.querySelector('.pc-hover')

// 鼠标移入显示
triggerImg.addEventListener('mouseenter', () => {
  targetHover.style.display = 'block'
})
// 鼠标移出隐藏
triggerImg.addEventListener('mouseleave', () => {
  targetHover.style.display = 'none'
})

方案3：调整HTML结构用基础选择器实现

如果你可以调整.pc-hover的位置，把它挪到img的同级后置位置，就可以用你原来的+选择器实现：

<div class="profile-content">
  <div class="pc-header">{head}</div>
  <div class="pc-content">
    <div class="pc-content-image">
      <img src="https://via.placeholder.com/300" alt="placeholder" />
      <!-- 把pc-hover挪到img同级别后面 -->
      <div class="pc-hover">{hover}</div>
    </div>
    <div class="pc-content-text">
      <p>{text}</p>
      <p>{text2}</p>
    </div>
  </div>
</div>

.pc-hover {
  display: none;
}
.pc-content-image img:hover + .pc-hover {
  display: block;
}

如果需要保留.pc-hover在页面顶部的视觉位置，给它加position: absolute定位调整位置即可。

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