怎样才能让边框和z-index一直保持到转换结束？

Question

我想创建一个比例，但我似乎有一点问题，我的边界和他们停留在比例转换。在我的代码中，网格有上边界和左边界，项有下边界和右边界。否则我会得到双重边界。现在，如果我想将比例转换为1.1来创建一个漂亮的弹出效果，当我移除鼠标时，边界就会消失，因为悬停状态会消失。有没有人知道如何在过渡过程中保留单个边框并保持边框不变？

This is what happens.

​

.project-grid .grid {
  width: 80%;
  align-self: center;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid black;
  border-left: 1px solid black;
}

.inner-container {
  position: relative;
  height: 200px;
  border-bottom: 1px solid black;
  border-right: 1px solid black;
  border-top: none;
  border-left: none;
  background: white;
  padding: 2rem;
}

.inner-container:hover {
  border: 1px solid black;
}

.project-tile {
  transition: transform .3s;
}

.project-tile .see-more {
  opacity: 0;
  position: absolute;
  bottom: 2rem;
  right: 2rem;
  transition: opacity 0.1s;
}

.project-tile:hover .see-more {
  opacity: 1;
}

.project-tile:hover {
  transform: scale(1.1);
  z-index: 2;
}

.span-2 {
  grid-column-end: span 2;
}

<div class="project-grid">
  <div class="flex-wrapper row">
    <h1>{{page.title}}</h1>
    <div class="grid">
      <div class="project-tile span-2">
        <div class="inner-container">
          <h3>SPIL</h3>
          <p>Yeet</p>
          <a href="#noref" class="see-more">Bekijk meer ></a>
        </div>
      </div>
      <div class="project-tile">
        <div class="inner-container">
          <h3>SPIL</h3>
          <p>Yeet</p>
          <a href="#noref" class="see-more">Bekijk meer ></a>
        </div>
      </div>
      <div class="project-tile">
        <div class="inner-container">
          <h3>SPIL</h3>
          <p>Yeet</p>
          <a href="#noref" class="see-more">Bekijk meer ></a>
        </div>
      </div>
      <div class="project-tile span-2">
        <div class="inner-container">
          <h3>SPIL</h3>
          <p>Yeet</p>
          <a href="#noref" class="see-more">Bekijk meer ></a>
        </div>
      </div>
    </div>
  </div>
</div>

​

Answer 1

简化代码，使用轮廓而不是组合边框，并确保在取消悬停时考虑z索引的延迟

​

.project-grid .grid {
  width: 80%;
  align-self: center;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.inner-container {
  position: relative;
  height: 200px;
  outline: 1px solid black;
  background: white;
  padding: 2rem;
}

.project-tile {
  transition: transform .3s,z-index 0s 0.3s; /* updated */
  z-index:1;
}

.project-tile .see-more {
  opacity: 0;
  position: absolute;
  bottom: 2rem;
  right: 2rem;
  transition: opacity 0.1s;
}

.project-tile:hover .see-more {
  opacity: 1;
}

.project-tile:hover {
  transform: scale(1.1);
  z-index: 2;
  transition: transform .3s,z-index 0s 0s; /* updated */
}
/* this will make sure the hovered element will always be on the top */
.project-tile:hover ~ *{
  z-index:1;
  transition: z-index 0s 0s;
}
/**/

.span-2 {
  grid-column-end: span 2;
}

<div class="project-grid">
  <div class="flex-wrapper row">
    <h1>{{page.title}}</h1>
    <div class="grid">
      <div class="project-tile span-2">
        <div class="inner-container">
          <h3>SPIL</h3>
          <p>Yeet</p>
          <a href="#noref" class="see-more">Bekijk meer ></a>
        </div>
      </div>
      <div class="project-tile">
        <div class="inner-container">
          <h3>SPIL</h3>
          <p>Yeet</p>
          <a href="#noref" class="see-more">Bekijk meer ></a>
        </div>
      </div>
      <div class="project-tile">
        <div class="inner-container">
          <h3>SPIL</h3>
          <p>Yeet</p>
          <a href="#noref" class="see-more">Bekijk meer ></a>
        </div>
      </div>
      <div class="project-tile span-2">
        <div class="inner-container">
          <h3>SPIL</h3>
          <p>Yeet</p>
          <a href="#noref" class="see-more">Bekijk meer ></a>
        </div>
      </div>
    </div>
  </div>
</div>

​