html - 如何使用纯CSS控制同一父级下的其他元素？

Question

这是代码笔 Codepen 中的简单示例

我正在尝试制作一些属于同一个父元素的区域，
当我悬停其中一个时，其他的不透明度会降低，或者其他样式会发生变化。

例如，当我将鼠标悬停在第二个元素上时，具有相同父元素的第一个元素将更改其 background-color。

我在第一段中使用了area这个词意味着 child 不一定非得是一个div，它可以是一个li 或 p 或其他元素。
要解决这个问题，它可以是任何类型的元素。

html 看起来像这样:

<!-- html -->
<div class="parent">
  <div class="one"></div>
  <div class="two"></div>
  <div class="three"></div>
  <div class="four"></div>
</div>

我尝试了 E ~ F 规则来解决这个问题，我已经知道它只适用于第一个 div，它是父元素的第一个子元素。

除了javascript，还有其他方法可以用纯css实现这个功能吗？
谢谢

Answer 1

当您悬停 .parent 时，更改所有未悬停的子项的样式(pen):

.parent {
  width: 100px; /** limit the width of the parent, so you can't hover it, without hovering one of the children as well **/
  margin:10px;

  &:hover > div:not(:hover) { /** only change the background of divs you don't hover as well **/
    background: red;
  }

  div{
    width:100px;
    height:100px;
    border:1px solid black;
  }
}