Question

我试图设置一个带有图块的网页设计，它会在悬停时缩小。它基本上工作正常。但是屏幕边缘的瓷砖显然会延伸到视口之外。有没有办法在没有JavaScript的情况下解决这个问题？

＆＃13;

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

＆＃13;

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

＆＃13;

对于该示例，想象一下在多条线上延伸的瓷砖库。所有中间区块的行为与我希望的完全相同。然而，最左边的区块不应更改其左侧值。虽然这对于第一个图块来说很简单，但我正在寻找每个最左边和最右边的图块的解决方案。

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

Answer 1

我绝对可以使用:first-child psuedo-class为你的第一个孩子工作。

您还可以为: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>

避免使用CSS动画离开视口

1 个答案: