Html 元素在向x提供溢出时被隐藏

发布于10月27日

即使给定溢出-y可见，当悬停在子div上时，它变得10px隐藏，我希望应该显示10px的子元素.

如果我删除两个溢出属性的工作.这里发生了什么问题如何修复它.我需要隐藏溢出-x

.page-wrapper {
  margin-top: 20px;
  border: solid 1px;
}

.offers-parent {
  height: 185px;
  overflow-x: hidden;
  overflow-y: visible;
}

.offers-child {
  width: 310px;
  height: 185px;
  background: red;
  cursor:pointer;
}

.offers-child:hover {
  transform: translateY(-10px);
}

<div class="page-wrapper">
<div class="offers-parent">
  <div class="offers-child-wrapper">
    <div class="offers-child"></div>
  </div>
</div>
</div>

推荐答案

试一试overflow-x:clip.它在现代浏览器中有很好的支持，但如果你需要支持旧的东西(如IE11或Opera mini)，请咨询caniuse.com

.page-wrapper {
  margin-top: 20px;
  border: solid 1px;
}

.offers-parent {
  height: 185px;
  overflow-x: clip;/* changed this from hidden */
  overflow-y: visible;
}

.offers-child {
  width: 310px;
  height: 185px;
  background: red;
  cursor:pointer;
}

.offers-child:hover {
  transform: translateY(-10px);
}

<div class="page-wrapper">
<div class="offers-parent">
  <div class="offers-child-wrapper">
    <div class="offers-child"></div>
  </div>
</div>
</div>