我如何使边框和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-index悬停在延迟上

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