在overflow：hidden和transform：translate之外显示内容

Question

我可以以某种方式显示隐藏溢出的div之外的内容吗？还有转换翻译？

我有一个滑块，我想用变换来偏移当前的幻灯片位置，但我也希望能够将一个子元素悬停在其中并隐藏我的溢出弹出窗口。这在我的示例中有效，但是当我添加transform translate属性时，子元素被截断。

在我的示例中，尝试删除transform: translateX(0)课程中的.slider，看看它如何在没有它的情况下工作。

.relative {
  position: relative;
  background: blue;
  padding: 0 50px;
}
.overflow {
  overflow: hidden;
}
.slide {
  float: left;
  min-height: 1px;
  width: 50%;
  background: red;
}
.product {
  height: 100px;
}
.product:hover {
  position: absolute;
  height: 200px;
  width: 50%;
  background: green;
}

<div class="relative">
  <div class="overflow">
    <div class="slider">
      <div class="slide">
        <div class="product">Slide1</div>
      </div>
      <div class="slide">
        <div class="product">Slide2</div>
      </div>
    </div>
  </div>
</div>

JSFiddle

Answer 1

如果您想使用滑块，可以使用margin而不是translate“移动”内容。尝试一下，似乎有效：

.relative {
  position: relative;
  background: blue;
  padding: 0 50px;
}
.overflow {
  overflow: hidden;
}
.slide {
  float: left;
  min-height: 1px;
  width: 50%;
  background: red;
}
.product {
  height: 100px;
}
.product:hover {
  position: absolute;
  height: 200px;
  width: 50%;
  background: green;
}

.slider {
   /* transform: translateX(-10px);*/
   margin-left: -10px;
}

<div class="relative">
  <div class="overflow">
    <div class="slider">
      <div class="slide">
        <div class="product">Slide1</div>
      </div>
      <div class="slide">
        <div class="product">Slide2</div>
      </div>
    </div>
  </div>
</div>