溢出隐藏问题

Question

有人知道为什么overflow: hidden在下面的例子中不能工作吗？我想实现的是，如果有人将鼠标悬停在.product-btn上，黑条就会滑动到它的内部。

​

.product-btn{
width: 250px;
height: 50px;
margin: 0 auto; 
text-align: center;
border: 1px solid #f39c12;
background-color: #fff;
transition: .5s ease-in-out;
overflow: hidden;

}
.product-btn:before{
content: " ";
position: absolute; 

left: -125px;
width: 250px;
height: 50px;
background-color: black;
transition: .5s ease-in-out;



}
.product-btn:hover:before {
left: 125px;

}

.product-btn-text{
 letter-spacing: 1px;
 
 
}
.product-btn: hover {
color: red;
z-index: 1;
cursor: pointer; 
}

<div class="product-btn">
<span class="product-btn-text">Text</span>
</div> 

​

Answer 1

因为您已经将position:absolute设置为:before元素，该元素相对于您的文档而不是您的.product-btn。

这意味着您的:before元素超出了.product-btn。因此，在:before元素中应用overflow:hidden将不起作用

只需设置位置:相对于.product-btn

堆栈代码段

​

.product-btn {
  width: 250px;
  height: 50px;
  margin: 0 auto;
  text-align: center;
  border: 1px solid #f39c12;
  background-color: #fff;
  transition: .5s ease-in-out;
  overflow: hidden;
  position: relative;
}

.product-btn:before {
  content: " ";
  position: absolute;
  left: -125px;
  width: 250px;
  height: 50px;
  background-color: black;
  transition: .5s ease-in-out;
}

.product-btn:hover:before {
  left: 125px;
}

.product-btn-text {
  letter-spacing: 1px;
}

.product-btn: hover {
  color: red;
  z-index: 1;
  cursor: pointer;
}

<div class="product-btn">
  <span class="product-btn-text">Text</span>
</div>

​