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

Question

这里是codepen的简单例子Codepen

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

例如，当我悬停第二个元素时，具有相同 parent 的第一个元素将更改其 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 处起作用，这是 [=44= 的第一个 child ].

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

Answer 1

您可以通过应用双悬停状态来创建它：

.parent:hover div {
  opacity:0.5;
}

.parent:hover div:hover {
  opacity:1;
}

.parent div {
  border:1px dashed #CCC;
  padding:1em;
  margin:1em;
  background:#666;
  color:#FFF;
}

<div class="parent">
    <div class="one">One</div>
    <div class="two">Two</div>
    <div class="three">Three</div>
    <div class="four">Four</div>
</div>

Answer 2

在相关说明中，~ 用于一般后继兄弟（意味着该元素位于此元素之后，但不一定紧随其后）并且是 CSS3 选择器。 + 用于下一个兄弟姐妹 CSS2.1.

参见Adjacent sibling combinator from Selectors Level 3 and 5.7 Adjacent sibling selectors from Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification。

Answer 3

当您悬停 .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;
  }
}

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

How to use pure CSS to control other elements under same parent?

html

css

parent

hover

selector