如何在任何第一个孩子悬停时突出显示所有第一个孩子等等？

Question

我有一组父母和孩子的 div。当第一个孩子中的任何一个处于悬停状态而其他每个孩子的不透明度设置为 0.25 时，如何让每个父母的所有第一个孩子将其不透明度设置为 1？每个父母的第 2、第 3 和第 4 个孩子也是如此。

例如，有一组 3 行（父），每行有一组 o 4 个框（子），当任何行上的第二个框悬停时，如何使每行的第二个框突出显示，以及其他没有突出显示的孩子？

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

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

Answer 2

如果你想要一个纯 CSS 的方式，你可以使用transform 和rotate 来做到这一点：

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

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

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

.grandparent {
  -ms-transform: rotate(90deg);
  /* IE 9 */
  -ms-transform-origin: 10% 100%;
  /* IE 9 */
  -webkit-transform: rotate(90deg);
  /* Chrome, Safari, Opera */
  -webkit-transform-origin: 10% 100%;
  /* Chrome, Safari, Opera */
  transform: rotate(90deg);
  transform-origin: 10% 100%;
}

<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 class="parent">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
  </div>
</div>