在悬停时更改不相关的 div

Question

是否有纯粹的 (S)CSS 解决方案来更改悬停时不相关的（即不是兄弟姐妹或 child）div，正如我试图在下面的代码？

.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; // trying to effect this change
  }
}

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

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

这里是 CodePen.

更新：@alekskorovin 的回复非常出色，值得点赞！

Answer 1

在 CSS 中，可以使用相同的父级和公共类和 :not 选择器以及 CSS 变量。据我所知，事情是当您将鼠标悬停在某些项目上时设置一些通用属性。如果可以有一个共同的父元素，你可以考虑这个例子 (https://codepen.io/alekskorovin/pen/bGobvzG):

:root {
  --bg: rgba(255, 255, 255, 0.3);
}
.one {
  background: blue;
}
.two {
  background: green;
}
.common {
  margin: 1rem;
  border: solid 0.1rem grey;
  position: relative;
}
.common:before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: var(--bg);
}

.parent:not(div:hover) {
  --bg: rgba(255, 255, 255, 0);
}

<div class="parent">
<article><div class="one common">One</div></article>
<article><div class="two common">Two</div></article>
</div>

在悬停时更改不相关的 div

Changing an unrelated div on hover

css

sass

hover