如何忽略所有内容放大元素？

Question

我基本上有一个代码，我想要做的是当它悬停时，该元素将放大并忽略其所有流。我说“忽略其流程”是因为其他元素（例如br标签）可能会阻止其部分内容。

这打算像一个带有图像的画廊。

Answer 1

您可以使用css属性transform: scale(1.5)缩放元素。然后将缩放元素的z-index设置为更高，以显示在所有元素的顶部。

工作示例：

.zoom {
  padding: 5px;
  background-color: green;
  transition: transform .1s;
  width: 20px;
  height: 20px;
  display: inline-block;
  margin-bottom: 2px;
  text-align: center;
  cursor: pointer;
}
.zoom:hover {
  -ms-transform: scale(1.5); /* IE 9 */
  -webkit-transform: scale(1.5); /* Safari 3-8 */
  transform: scale(1.5); 
  background-color: red;
  z-index: 1000;
}

<div class="zoom">1</div>
<div class="zoom">2</div>
<div class="zoom">3</div> <br>
<div class="zoom">4</div>
<div class="zoom">5</div>
<div class="zoom">6</div><br>
<div class="zoom">7</div>
<div class="zoom">8</div>
<div class="zoom">9</div>

Answer 2

假设主容器（不仅仅是元素）具有一个名为container的类，只需添加此规则。它将较高的z-index应用于您所悬停的所有对象，而不仅仅是元素本身，这应该可以工作：

.container *:hover {
  z-index: 1;
}

这里是一个例子：

.container {
  width: 200px;
}

.row {
  display: flex;
}

.box {
  flex: 1;
  height: 60px;
  background-color: salmon;
  margin: 0px 2px;
  transition: all .5s;
}

.box:hover {
  transform: scale(1.5);
  background-color: steelblue;
}

.container *:hover {
  z-index: 1;
}

<div class="container">
  <div class="row">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
  <hr>
  <div class="row">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
  <hr>
  <div class="row">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
</div>