html - 如何在任何第一个 child 悬停时突出显示所有第一个 child 等等？

Question

我有一组 parent 和 child 的 div。当第一个 child 中的任何一个悬停而其他每个 child 的不透明度设置为 0.25 时，如何让每个 parent 的所有第一个 child 将其不透明度设置为 1？ parent 双方的第二个、第三个和第四个 child 也是如此。

例如，有一组 3 行(父行)，每行有一组 4 个框(子行)，当悬停任何行的第二个框时，如何使每行的第二个框突出显示，以及每个其他 child 都没有突出显示？

我期望发生的事情的图片:

.child {
  background: grey;
  display: inline-block;
  height: 50px;
  width: 50px;
}

.grandparent:hover .child {
  opacity: .25;
}

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

<div class="grandparent">
  <div class="parent">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
  </div>
  <div class="parent">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
  </div>
  <div class="parent">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
  </div>
</div>

Answer 1

实现此设置的最直接方法是使每个 .parent 成为垂直列，而不是水平行。

然后你可以使用:

.grandparent:hover .child {
  opacity: .25;
}

低亮显示所有 .child div... 和

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

重新突出显示悬停在 .parent 列中的 .child div。

---

工作示例:

.grandparent {
display: flex;
justify-content: space-around;
width: 214px;
height: 156px;
padding: 2px;
}

.parent {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
width: 50px;
height: 156px;
}

.child {
width: 50px;
height: 50px;
background-color: grey;
}

.grandparent:hover .child {
  opacity: .25;
}

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

<div class="grandparent">

<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>

<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>

<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>

<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>

</div>