避免使用 CSS 动画离开视口

Question

我正在尝试设置一个带有磁贴的网页设计，该图块将在悬停时缩小。它基本上工作正常。但屏幕边缘的磁贴显然超出了视口。有没有办法在没有JavaScript的情况下解决这个问题？

#tiles article {
    width: 150px;
    height: 225px;
    position: relative;
    float: left;
    margin: 5px;
    vertical-align: top;
}
#tiles div.growingtile {
    position: absolute;
    top:0;
    left:0;
    width: 150px;
    height: 225px;
    overflow: hidden;
    transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.2 ease-in-out;
}
#tiles div.growingtile:hover {
    z-index: 100;
    left: -75px;
    top: -10px;
    width: 300px;
    height: 320px;
    overflow: visible;
    background-color: yellow;
}

<section id="tiles">
  <article>
    <div class="growingtile">
      <p>This is just a demo text.</p>
    </div>
  </article>
  <article>
    <div class="growingtile">
      <p>This is another demo text.</p>
    </div>
  </article>
</section>

对于示例，假设一个跨多行延伸的磁贴库。所有中间磁贴的行为都完全符合我的意愿。但是，最左侧的磁贴不应更改其左侧值。虽然这对于第一个磁贴来说很简单，但我正在为每个最左边和可能最右边的磁贴寻找解决方案。

如果没有唯一的CSS解决方案。我目前想象的最简单的解决方案是向所有磁贴添加一个悬停处理程序，它在需要时调整磁贴位移。我也欢迎任何更简单的想法。

Answer 1

我绝对可以通过使用 :first-child 伪类来让它为您的第一个孩子工作。

您还可以添加 :last-child 或 :nth-child() 的功能。

#tiles article {
  width: 150px;
  height: 225px;
  position: relative;
  float: left;
  margin: 5px;
  vertical-align: top;
}
#tiles div.growingtile {
  position: absolute;
  top: 0;
  left: 0;
  width: 150px;
  height: 225px;
  overflow: hidden;
  transition: all 0.5s ease-in-out;
  -webkit-transition: all 0.2 ease-in-out;
}
#tiles div.growingtile:hover {
  z-index: 100;
  left: -75px;
  top: -10px;
  width: 300px;
  height: 320px;
  overflow: visible;
  background-color: yellow;
}
#tiles article:first-child div.growingtile:hover {
  left: 0;
}

<section id="tiles">
  <article>
    <div class="growingtile">
      <p>This is just a demo text.</p>
    </div>
  </article>
  <article>
    <div class="growingtile">
      <p>This is another demo text.</p>
    </div>
  </article>
</section>