CSS 滑块行为异常

Question

所以我正在学习 CSS 转换和转换，并尝试在 CodePen 中制作一个简单的滑块。基本思想是我有一个 div 在另一个之上，我希望第一个在悬停时从第二个滑落。它在没有任何溢出属性的情况下工作正常，但是一旦我将 overflow: hidden 添加到下面的方块，它就会将上面的方块向下推。这是为什么？

http://codepen.io/johnnycopes/pen/BKReOq

--- HTML ---

<div class="container">
  <div class="shape">
    <div class="shape-cover">
    </div>
  </div>
</div>

--- CSS ---

body {
  font-family: Verdana;
  background: #fff0a5;
}

.container {
  margin: 0 auto
}

.shape {
  margin: 50px auto 0;
  width: 200px;
  height: 200px;
  overflow: hidden;
  background: #ffb03b;
}

.shape-cover {
  margin: 50px auto 0;
  height: 200px;
  width: 200px;
  background: #468966;
  transform: translateX(0%);
  transition: transform .5s ease-in-out;
}

.shape-cover:hover {
  transform: translateX(100%);
}

Answer 1

这是因为您在 "overlaying square" 上使用了边距。

shape-cover 位于形状内部，因此 shape-cover 的边距将相对于其父对象。

因此请尝试移除形状封面上的边距 div。

CSS 滑块行为异常

CSS slider behaving strangely

css

slideshow