Question

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

我想以这样一种方式制作：如果我将鼠标悬停在每个div上，那么全屏将扩展到其他三个，将它们隐藏起来，同时保持静止状态。

我现在所拥有的并不是很有效，因为当我将鼠标悬停在其中一个div上时，它会移动所有其他div并破坏屏幕。我真的很感激任何建议。

HTML（正好在体内）：

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

CSS：

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

Answer 1

这很粗糙，准备就绪，但有效。方法是将所有内容包装在相对定位的包装器中，然后绝对定位方块。这样他们就可以拥有z指数，这是问题的关键。

.wrap {
  position: relative;
  height: 500px;
}

.box {
  display: block;
  width: 50%;
  height: 50%;
  z-index: 1;
  -webkit-transition: width 1s, height 1s;
  transition: width 1s, height 1s;
  position: absolute;
}

.box:hover {
  width: 100%;
  height: 100%;
  z-index: 2;
}

#sup-izq {
  top: 0px;
  left: 0px;
  border-right: 1px solid black;
  border-bottom: 1px solid black;
  background-color: #8cff66;
}

#sup-der {
  top: 0px;
  right: 0px;
  border-left: 1px solid black;
  border-bottom: 1px solid black;
  background-color: #ff751a;
}

#inf-izq {
  bottom: 0px;
  left: 0px;
  border-top: 1px solid black;
  border-right: 1px solid black;
  background-color: #3385ff;
}

#inf-der {
  bottom: 0px;
  right: 0px;
  border-top: 1px solid black;
  border-left: 1px solid black;
  background-color: #d147a3;
}

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

Answer 2

最好和最高效的方法是使用transform: scale和transform-origin

scale(2)将在两个方向（宽度/高度）上加倍其大小，transform-origin默认为center center（50％50％），控制原点。

注意，对于高度设置为precent的元素，其父级需要高度，因此我添加了html, body规则。另一种选择是使用viewport units vw / vh

＆＃13;

html, body {                            /*  added rule  */
  margin: 0;
  height: 100%;
}

.box {
  position: relative;
  box-sizing: border-box;
  float: left;
  width: 50%;
  height: 50%;
  z-index: 0;
  transition: transform 0.5s,          /*  changed property  */
              z-index 0.5s;
}

.box:hover {
  transform: scale(2);                  /*  added property  */
  z-index: 10;                     /*  added so hovered is on top  */
}

#sup-izq {
  border-right: 1px solid black;
  border-bottom: 1px solid black;
  background-color: #8cff66;
  transform-origin: left top;           /*  added property  */
}

#sup-der {
  border-left: 1px solid black;
  border-bottom: 1px solid black;
  background-color: #ff751a;
  transform-origin: right top;          /*  added property  */
}

#inf-izq {
  border-top: 1px solid black;
  border-right: 1px solid black;
  background-color: #3385ff;
  transform-origin: left bottom;        /*  added property  */
}

#inf-der {
  border-top: 1px solid black;
  border-left: 1px solid black;
  background-color: #d147a3;
  transform-origin: right bottom;       /*  added property  */
}

＆＃13;

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

＆＃13;

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

2 个答案: