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

Question

这是codepen Codepen的简单示例

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

例如,当我悬停第二个元素时,具有相同父元素的第一个元素将改变它background-color.

我在第一段使用单词area意味着孩子不一定是a div,它可以是a li或a 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，也更改所有未悬停的子项的样式（钢笔）：

.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;
  }
}