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

Question

我有一套父母和孩子的div。当第一个孩子的任何一个在悬停而其他人的不透明度设置为0.25时，如何让每个父母的所有第一个孩子将其不透明度设置为1？每个父母的第2，第3和第4个孩子也一样。

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

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

＆＃13;

＆＃13;

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

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

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

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

然后你可以使用：

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

点亮所有.child div ...和

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

重新突出显示正在悬停的.child列中的.parent 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方式，可以使用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%; }来执行此操作：

＆＃13;

＆＃13;

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

＆＃13;

{{1}}

＆＃13;

＆＃13;

＆＃13;