我想对某些translateX
标题应用<h4>
效果。我已经测试了代码并且可以正常工作,但是执行效果时我注意到一个小问题。问题与元素在翻译上应用的位置有关,因为我希望效果仅在父div悬停时才可见。问题在于,如果未将其悬停,也会显示最近的元素。
这是代码示例,我使用bootstrap 4卡列。
<div class="card-columns">
<div class="card">
<div class="overlay">
<h4 class="title"><a href="#">link1</a></h4>
</div>
</div>
<div class="card">
<div class="overlay">
<h4 class="title"><a href="#">link2</a></h4>
</div>
</div>
<div class="card">
<div class="overlay">
<h4 class="title"><a href="#">link3</a></h4>
</div>
</div>
</div>
<style>
.overlay{
opacity: 0;
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
right: 0;
background-color: rgba(0,0,0,0.5);
z-index: 1;
}
.card:hover .overlay{
opacity: 1;
}
.title{
transition: all 300ms;
transform: translateX(-200%);
}
.card:hover .title{
transition: all 300ms;
transform: translateX(0%);
}
</style>
Codepen演示https://codepen.io/anon/pen/oOWyVK
答案 0 :(得分:1)
尝试将overflow:hidden;
添加到叠加层类中,这样子
.overlay{
opacity: 0;
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
right: 0;
background-color: rgba(0,0,0,0.5);
z-index: 1;
overflow:hidden;
}
是您需要的吗?
您遇到了这个问题,因为您正在执行-200%的translateX,因此title
将不可用,您需要用overflow:hidden;
隐藏要使用的元素title
开箱即用:)
答案 1 :(得分:1)
只需添加overflow: hidden;
.card-columns .card {
display: inline-block;
width: 100%;
overflow: hidden;
}