Css 悬停在嵌套另一个div的div元素上不工作

我有一个带有类按钮包装的div，它包含另一个带有类按钮的div。当鼠标悬停在on位置时，按钮包装器div应该将其填充从8px增加到16px，以便按钮div的大小减小。但是，当我将鼠标悬停在按钮包装上时，按钮包装div没有响应

代码托管在网站上

这是我的密码：

正文{
字体系列：“Segoe UI”，塔荷马，日内瓦，Verdana，无衬线；
}
.背景，
.底垫，
.叠加，
.掩护{
位置：固定；
排名：0；
左：0；
右：0；
底部：0；
溢出：滚动；
}
.叠加，
.掩护{
显示：无；
}
.背景{
z指数：0；
背景图片：url（“images/shards.jpg”）；
背景尺寸：封面；
最小宽度：100%；
最小高度：100%；
}
.底垫{
z指数：1；
身高：100%；
}
.内容{
z指数：2；
填充顶部：20px；
}
.覆盖{
z指数：3；
}
.掩护{
z指数：4；
}
.菜单{
宽度：100%；
}
.按钮包装{
填充：8px；
浮动：左；
框大小：边框框；
高度：150像素；
}
.按钮{
宽度：100%；
身高：100%；
不透明度：.9；
过渡：1s；
}
.第1排{
宽度：33.3%；
}
.第2排{
宽度：66.6%；
}
.第3排{
宽度：100%；
}
.按钮包装器：悬停{
填充：16px；
}
瑞德先生{
边框：1px纯红；
背景：红色；
}
蓝先生{
边框：1px纯蓝色；
背景：蓝色；
}

1/3
2/3
1.
1/3
2/3
1.

我已经调整了您的代码，并记录了代码本身的更改。 最重要的更改是使用a来显示相邻的列（行已重命名为列）

我还创建了

.content

类以使z索引工作

正文{
字体系列：“Segoe UI”，塔荷马，日内瓦，Verdana，无衬线；
}
.背景，
.底垫，
.叠加，
.掩护{
位置：固定；
排名：0；
左：0；
右：0；
底部：0；
溢出：滚动；
}
.叠加，
.掩护{
显示：无；
}
.背景{
z指数：0；
背景图片：url（“images/shards.jpg”）；
背景尺寸：封面；
最小宽度：100%；
最小高度：100%；
}
.底垫{
z指数：1；
身高：100%；
}
.内容{
位置：相对；/*添加以使z索引工作*/
z指数：2；
填充顶部：20px；
}
.覆盖{
z指数：3；
}
.掩护{
z指数：4；
}
.菜单{
宽度：100%；
显示：flex；/*已添加*/
柔性包裹：包裹；/*已添加*/
}
.按钮包装{
填充：8px；
/*浮动：左；已删除*/
框大小：边框框；
高度：150像素；
}
.按钮{
宽度：100%；
身高：100%；
不透明度：.9；
过渡：1s；
}
.col-1{
宽度：33.3%；
}
.col-2{
宽度：66.6%；
}
上校3{
宽度：100%；
}
.按钮包装器：悬停{
填充：16px；
}
瑞德先生{
边框：1px纯红；
背景：红色；
}
蓝先生{
边框：1px纯蓝色；
背景：蓝色；
}

1/3
2/3
1.
1/3
2/3
1.

我有点不喜欢flexbox，因为它与旧设备的兼容性有限。我还意识到，要解决这个问题，我所需要做的就是将

位置：relative

添加到

.content

类中；我完全忘记了如何将

z-index

与

position

一起使用，这样它才能真正工作。谢谢你的帮助！我的荣幸。很高兴听到您能够解决问题。