Div以前的兄弟姐妹并没有减少它的大小

Question

我有一个代码，其中div应该将其大小增加到两倍。这是有效的，但悬停后的前几个兄弟姐妹并没有增加它们的大小。

当我将鼠标悬停在第一个框上时，其他框会更改大小。当我悬停在第二个框上时，底部框的大小会改变，但第一个框的大小不会改变。我想在悬停框的同时，也瞄准以前的兄弟姐妹。

* {
box-sizing: border-box;
transition: 0.5s ease all;
}
body {
margin: 20px;
font-family: calibri;
}
.box1 {
width: 50px;
height: 50px;
margin-bottom: 20px;
background: #FF7F50;
margin: 0 auto 20px auto;
}
.box2 {
width: 50px;
height: 50px;
margin-bottom: 20px;
background: #6495ED;
margin: 0 auto 20px auto;
}
.box3 {
width: 50px;
height: 50px;
margin-bottom: 20px;
background: #FFF8DC;
margin: 0 auto 20px auto;
}
.box4 {
width: 50px;
height: 50px;
margin-bottom: 20px;
background: #DC143C;
margin: 0 auto 20px auto;
}
.box5 {
width: 50px;
height: 50px;
margin-bottom: 20px;
background: #00FFFF;
margin: 0 auto 20px auto;
}
.box5 {
width: 50px;
height: 50px;
margin-bottom: 20px;
background: #00008B;
margin: 0 auto 20px auto;
}
.box6 {
width: 50px;
height: 50px;
margin-bottom: 20px;
background: #008B8B;
margin: 0 auto 20px auto;
}
.box7 {
width: 50px;
height: 50px;
margin-bottom: 20px;
background: #B8860B;
margin: 0 auto 20px auto;
}
.box8 {
width: 50px;
height: 50px;
margin-bottom: 20px;
background: #006400;
margin: 0 auto 20px auto;
}
.box9 {
width: 50px;
height: 50px;
margin-bottom: 20px;
background: #B22222;
margin: 0 auto 20px auto;
}
.box10 {
width: 50px;
height: 50px;
margin-bottom: 20px;
background: #E9967A;
margin: 0 auto 20px auto;
}
.box11 {
width: 50px;
height: 50px;
margin-bottom: 20px;
background: #FF1493;
margin: 0 auto 20px auto;
}
.box12 {
width: 50px;
height: 50px;
margin-bottom: 20px;
background: #9400D3;
margin: 0 auto 20px auto;
}
.box div:hover~* {
width: 100px;
height: 100px;
}

<section class="box">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
<div class="box6"></div>
<div class="box7"></div>
<div class="box8"></div>
<div class="box9"></div>
<div class="box10"></div>
<div class="box11"></div>
<div class="box12"></div>
</section>

Answer 1

有一种方法可以实现这一点。诀窍是以父div为目标，展开所有子体，但强制悬停的元素不展开。

但你会遇到另一个问题。当顶部的框展开时，它会将您悬停的框向下推，您将失去该特定框的悬停。如果这是一种翻转效应，我们就没有问题了。

看看下面的解决方案，你就会知道我在说什么了。希望你能想出一些办法。一切顺利。

* {
box-sizing: border-box;
transition: 0.5s ease all;
}
body {
margin: 20px;
font-family: calibri;
}
.box {
width: 100px;
margin: auto;
text-align: center;
}
.box1 {
width: 50px;
height: 50px;
margin-bottom: 20px;
background: #FF7F50;
margin: 0 auto 20px auto;
}
.box2 {
width: 50px;
height: 50px;
margin-bottom: 20px;
background: #6495ED;
margin: 0 auto 20px auto;
}
.box3 {
width: 50px;
height: 50px;
margin-bottom: 20px;
background: #FFF8DC;
margin: 0 auto 20px auto;
}
.box4 {
width: 50px;
height: 50px;
margin-bottom: 20px;
background: #DC143C;
margin: 0 auto 20px auto;
}
.box5 {
width: 50px;
height: 50px;
margin-bottom: 20px;
background: #00FFFF;
margin: 0 auto 20px auto;
}
.box5 {
width: 50px;
height: 50px;
margin-bottom: 20px;
background: #00008B;
margin: 0 auto 20px auto;
}
.box6 {
width: 50px;
height: 50px;
margin-bottom: 20px;
background: #008B8B;
margin: 0 auto 20px auto;
}
.box7 {
width: 50px;
height: 50px;
margin-bottom: 20px;
background: #B8860B;
margin: 0 auto 20px auto;
}
.box8 {
width: 50px;
height: 50px;
margin-bottom: 20px;
background: #006400;
margin: 0 auto 20px auto;
}
.box9 {
width: 50px;
height: 50px;
margin-bottom: 20px;
background: #B22222;
margin: 0 auto 20px auto;
}
.box10 {
width: 50px;
height: 50px;
margin-bottom: 20px;
background: #E9967A;
margin: 0 auto 20px auto;
}
.box11 {
width: 50px;
height: 50px;
margin-bottom: 20px;
background: #FF1493;
margin: 0 auto 20px auto;
}
.box12 {
width: 50px;
height: 50px;
margin-bottom: 20px;
background: #9400D3;
margin: 0 auto 20px auto;
}
.box:hover>* {
width: 100px;
height: 100px;
}
.box>*:hover {
width: 50px;
height: 50px;
margin-bottom: 20px;
margin: 0 auto 20px auto;
}

<section class="box">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
<div class="box6"></div>
<div class="box7"></div>
<div class="box8"></div>
<div class="box9"></div>
<div class="box10"></div>
<div class="box11"></div>
<div class="box12"></div>
</section>