Css 块悬停在更高的另一块

在黄色方块中，我有一个悬停效果，但悬停时显示的绿色方块越高。我只需要在黄色广场的悬停效果

我尝试使用

z-index

-没有帮助

我做错了什么

*{
填充：0；
保证金：0；
}
.包装纸{
边框：2件纯黑；
边缘顶部：20px；
填充：20px 20px；
身高：100%；
}
.第一区{
背景颜色：绿色；
z指数：5；
位置：相对位置；
}
.项目{
填充：10px；
保证金：0；
文本对齐：居中；
}
.名单{
显示：内联块；
宽度：50px；
高度：40px；
背景颜色：黄色；
位置：相对位置；
z指数：10；
}
.list:hover.list\u hover{
不透明度：1；
底部：0；
}
.列表\悬停{
宽度：100%；
身高：50%；
背景色：#fff；
位置：绝对位置；
底部：-50px；
过渡：底部0.5s；
不透明度：0；
z指数：4；
}
.第二区{
背景色：红色；
宽度：100%；
高度：200px；
z指数：5；
位置：相对位置；
}

我不确定我是否100%理解了你的帖子，但我相信你只需要添加

overflow:hidden

到.list类

检查代码段是否正在执行您想要的操作：

*{
填充：0；
保证金：0；
}
.包装纸{
边框：2件纯黑；
边缘顶部：20px；
填充：20px 20px；
身高：100%；
}
.第一区{
背景颜色：绿色；
z指数：5；
位置：相对位置；
}
.项目{
填充：10px；
保证金：0；
文本对齐：居中；
}
.名单{
显示：内联块；
宽度：50px；
高度：40px；
背景颜色：黄色；
位置：相对位置；
z指数：10；
溢出：隐藏；
}
.list:hover.list\u hover{
不透明度：1；
底部：0；
}
.列表\悬停{
宽度：100%；
身高：50%；
背景色：#fff；
位置：绝对位置；
底部：-50px；
过渡：底部0.5s；
不透明度：0；
z指数：4；
}
.第二区{
背景色：红色；
宽度：100%；
高度：200px；
z指数：5；
位置：相对位置；
}

这里有另一个解决方案，首先使用

高度
为
0%
，然后将其转换为
50%
。还要检查你的代码，里面有一些错误。例如，您可以使用W3验证器


*{
填充：0；
保证金：0；
}
.包装纸{
边框：2件纯黑；
边缘顶部：20px；
填充：20px 20px；
身高：100%；
}
.第一区{
背景颜色：绿色；
z指数：5；
位置：相对位置；
}
.项目{
填充：10px；
保证金：0；
文本对齐：居中；
}
.名单{
显示：内联块；
宽度：50px；
高度：40px；
背景颜色：黄色；
位置：相对位置；
z指数：10；
}
.list:hover.list\u hover{
不透明度：1；
底部：0px；
身高：50%；
过渡：线性。5s；
}
.列表\悬停{
宽度：100%；
身高：0%；
背景色：#fff；
位置：绝对位置；
底部：0px；
不透明度：0；
z指数：4；
}
.第二区{
背景色：红色；
宽度：100%；
高度：200px；
z指数：5；
位置：相对位置；
}







难以置信。这太容易了。（非常匹配）您甚至可以在没有伪类的情况下使用transition，比如
：hover
？我认为@Гааааа代码充满了错误。例如，缺少结尾
标记。