我正在尝试设置一个带有磁贴的网页设计,它会在悬停时缩小。它基本上工作正常。但是屏幕边缘的图 block 显然超出了视口(viewport)。没有 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>
例如,想象一个瓷砖画廊延伸到多条线上。所有中间瓷砖的行为都完全符合我的要求。然而,最左边的图 block 不应更改其左侧值。虽然这对于第一个图 block 来说很简单,但我正在为每个最左边和可能最右边的图 block 寻找解决方案。
如果没有 CSS only 解决方案。我目前想象的最简单的解决方案是为所有图 block 添加一个悬停处理程序,它会在需要时调整图 block 位移。我也欢迎任何更简单的想法。
最佳答案
我绝对可以通过使用 :first-child
伪类让它为您的第一个 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>
关于css - 避免 CSS 动画离开视口(viewport),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29809841/