如何用纯(S)CSS实现hover时修改无关联div的样式

用户原实现代码如下：

原SCSS代码 #

.blue,.green {
  width: 5rem;
  height: 3rem;
  margin: 1rem;
}

.blue {
  background-color: blue;
}

.green {
  background-color: green;
  &:hover {
    background-color: lightgreen;
  }
  &:hover .blue {
    background-color: lightblue; // 尝试修改.blue的样式
  }
}

原HTML代码 #

<div>
  <div class="blue" />
</div>

<div>
  <div class="green" />
</div>

解答 #

可以实现，需要使用CSS的:has()伪类，目前所有主流现代浏览器均已支持该特性。
你原来的写法不生效是因为Sass编译后的选择器.green:hover .blue属于后代选择器，只会匹配.green内部嵌套的.blue子元素，你的DOM结构中两个元素既没有嵌套关系也不是兄弟节点，自然无法命中。

修复后的SCSS代码 #

.blue,.green {
  width: 5rem;
  height: 3rem;
  margin: 1rem;
}

.blue {
  background-color: blue;
}

.green {
  background-color: green;
  &:hover {
    background-color: lightgreen;
  }
}

/* 核心逻辑：当页面内存在处于hover状态的.green元素时，修改所有.blue元素的背景色 */
body:has(.green:hover) .blue {
  background-color: lightblue;
}

HTML代码无需做任何调整即可生效。

兼容说明 #

如果需要兼容不支持:has()的旧版浏览器（如IE、2022年之前发布的Safari版本），没有纯CSS实现方案，需要通过JavaScript监听mouseenter和mouseleave事件来修改.blue的样式。

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