jquery - 悬停时的 translateX css 效果

Question

我想申请 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

Answer 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 :)