CSS实现悬停一个div时修改另一个div样式的正确方法

你的代码不生效有两个核心原因：

• CSS相邻兄弟选择器+只能匹配当前元素之后、紧跟在同级位置的元素，你的DOM结构里.top排在.bottom前面，.bottom:hover + .top完全无法选中排在前面的.top节点
• 初始字号规则是绑定在.top p选择器上的，就算你选中了.top元素直接设置font-size，要么选择器优先级低于初始规则，要么没有命中实际承载文本的p标签，不会产生字号变化效果。

不需要调整你现有的DOM结构，用:has()伪类就能直接实现，目前主流浏览器全支持：

.top p {
  font-size: 3vw;
  transition: font-size .2s ease; /* 可选，添加平滑过渡效果 */
}

.bottom p {
  cursor: pointer;
}

/* 感知wrapper内部的.bottom被悬停时，修改.top内p标签的字号 */
.wrapper:has(.bottom:hover) .top p {
  font-size: 6vw;
}

对应的HTML保持原有结构即可，不需要改动：

<div class='wrapper'>
  <div class='top'>
    <p>scale</p>
  </div>
  <div class='bottom'>
    <p>hover</p>
  </div>
</div>

如果你需要兼容特别老的、不支持:has()的浏览器，只能把.bottom节点在DOM里移到.top前面，再通过flex/grid的order属性调整视觉显示顺序，再用+选择器匹配，但这种方案没有必要，目前:has()的兼容性已经足够覆盖绝大多数使用场景。

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