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>

Div Previous Siblings并没有减少它的大小

1 个答案: