隐藏父母div中的孩子并在外面显示

Question

有没有办法如何隐藏孩子在父母内部并在他离开div后显示？我正在使用anymation，transform - 从（100％，0）转换为（0,0），但在移动过程中，这个div与父div重叠。我因为孩子而无法使用z-index。孩子不能上层然后parrent ...所以有没有其他方式？如何仅从父div中显示孩子？

我正在制作任何动态菜单，我想点击链接后显示subMenu

Answer 1

你想要这样的东西吗？在O(N)上使用overflow:hidden，或者如果您希望显示parent，请使用child

您可以设置overflow:visible。它仍然像下面的例子一样工作

让我知道是否有帮助

animation

.parent { 
width:100px;
height:100px;
border:2px solid black;
overflow:hidden;
}
.child {
  width:100px;
  height:96px;
  border:2px solid red;
  opacity:0;
  transition:0.5s;
  
}
.parent:hover .child {
  transform:translateX(30px);
  opacity:1;
  }