如何在忽略所有内容的情况下缩放元素？

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;
  counter-reset: box;
}

.row {
  display: flex;
}

.box {
  flex: 1;
  height: 60px;
  background-color: salmon;
  margin: 0px 2px;
  transition: all .5s;
  counter-increment: box;
  display: flex;
  justify-content: center;
  align-items: center;
}

.box::after {
  content: counter(box);
  color: white;
  font-size: 1.5em;
}

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

​