translateX CSS对悬停的影响

时间:2019-04-11 13:15:48

标签: jquery css css3 css-transitions

我想对某些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

2 个答案:

答案 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;
}