Html 使一个div扩展到覆盖其他div的所有屏幕

每次我进入充满整个浏览器屏幕的页面时，都会显示一个2乘2的div网格

我想让它成为一种方式，如果我在每个div上悬停，其中一个将全屏扩展到其他三个div上，在它们静止时隐藏它们

我现在所做的不太管用，因为当我将鼠标悬停在其中一个div上时，它会移动所有其他div并破坏屏幕。如果您能给我提些建议，我将不胜感激

HTML（仅在身体内部）：

---

这是粗糙的，准备好了，但有效。方法是将所有东西包装在一个相对定位的包装器中，然后绝对定位正方形。这样他们就可以有一个z指数，这是问题的关键

.wrap{
位置：相对位置；
高度：500px；
}
.盒子{
显示：块；
宽度：50%；
身高：50%；
z指数：1；
-webkit过渡：宽度1s，高度1s；
过渡：宽度1s，高度1s；
位置：绝对位置；
}
.box:悬停{
宽度：100%；
身高：100%；
z指数：2；
}
#辅助izq{
顶部：0px；
左：0px；
右边框：1px纯黑；
边框底部：1px纯黑；
背景色：#8cff66；
}
#副手{
顶部：0px；
右：0px；
左边框：1px纯黑；
边框底部：1px纯黑；
背景色：#ff751a；
}
#inf-izq{
底部：0px；
左：0px；
边框顶部：1件纯黑；
右边框：1px纯黑；
背景色：#3385ff；
}
#inf der{
底部：0px；
右：0px；
边框顶部：1件纯黑；
左边框：1px纯黑；
背景色：#d147a3；
}

---

最好、最有效的方法是使用

比例（2）

将在两个方向（宽度/高度）上使其大小加倍，

变换原点

，默认为

中心

（50%50%），控制原点

注意，对于要在前面设置高度的元素，其父元素需要一个高度，因此我添加了

html，body

规则。另一种选择是使用

vw

/

vh

html，主体{/*添加了规则*/
保证金：0；
身高：100%；
}
.盒子{
位置：相对位置；
框大小：边框框；
浮动：左；
宽度：50%；
身高：50%；
z指数：0；
转换：转换0.5s，/*已更改属性*/
z指数0.5s；
}
.box:悬停{
变换：缩放（2）；/*添加属性*/
z-index:10；/*已添加，因此悬停在顶部*/
}
#辅助izq{
右边框：1px纯黑；
边框底部：1px纯黑；
背景色：#8cff66；
变换原点：左上；/*添加了属性*/
}
#副手{
左边框：1px纯黑；
边框底部：1px纯黑；
背景色：#ff751a；
变换原点：右上；/*添加了属性*/
}
#inf-izq{
边框顶部：1件纯黑；
右边框：1px纯黑；
背景色：#3385ff；
变换原点：左下；/*添加了属性*/
}
#inf der{
边框顶部：1件纯黑；
左边框：1px纯黑；
背景色：#d147a3；
变换原点：右下；/*添加了属性*/
}

非常感谢！太完美了。例如，你能告诉我为什么与Mayer的设计方法相比，它是最有效的方法吗？@DokAsov因为

transform

利用GPU硬件加速，你可以在这里了解更多：@DokAsov欢迎你。我也可以请你考虑接受我的答案，如果它解决了你的问题。

<div class="box" id="sup-izq"></div>
<div class="box" id="sup-der"></div>
<div class="box" id="inf-izq"></div>
<div class="box" id="inf-der"></div>

.box {
  box-sizing: border-box;
  float: left;
  width: 50%;
  height: 50%;
  z-index: 1;
  -webkit-transition: width 1s, height 1s;
  transition: width 1s, height 1s;
}

.box:hover {
  width: 100%;
  height: 100%;
}

#sup-izq {
  border-right: 1px solid black;
  border-bottom: 1px solid black;
  background-color: #8cff66;
}

#sup-der {
  border-left: 1px solid black;
  border-bottom: 1px solid black;
  background-color: #ff751a;
}

#inf-izq {
  border-top: 1px solid black;
  border-right: 1px solid black;
  background-color: #3385ff;
}

#inf-der {
  border-top: 1px solid black;
  border-left: 1px solid black;
  background-color: #d147a3;
}