Html 重叠div上的悬停效果？

我目前遇到的问题是，我创建的所有按钮都没有悬停效果。以上是我拥有的代码的一个小示例。我很确定这是因为我把每个按钮都用了100%的宽度/高度分隔，但我不完全确定如何放置它们。这种假设也很容易出错

#测试容器{
宽度：800px；
高度：500px；
显示：内联块；
位置：相对位置；
文本对齐：居中；
}
.testButtonsDiv{
位置：绝对位置；
宽度：100%；
身高：100%；
}
.测试按钮{
宽度：70px；
高度：70像素；
背景色：rgb（71,71,71）；
颜色：白色；
}
#测试按钮1{
右边距：自动；
左边距：自动；
边框：1px实心rgb（255、166、0）；
}
#testButton1：悬停{
背景色：rgb（255、166、0）；
}
#测试按钮2{
右边距：300px；
边缘顶部：50px；
边框：1px实心rgb（255、166、0）；
}
#testButton2：悬停{
背景色：rgb（255、166、0）；
}

---

移除

.testButtonsDiv

并使用

位置：绝对

、

顶部

和

左侧

定位两个按钮：

#测试容器{
位置：相对位置；
宽度：800px；
高度：500px；
显示：内联块；
文本对齐：居中；
}
.测试按钮{
位置：绝对位置；
宽度：70px；
高度：70像素；
背景色：rgb（71,71,71）；
颜色：白色；
}
#测试按钮1{
左：计算（50%-35px）；
边框：1px实心rgb（255、166、0）；
}
#testButton1：悬停{
背景色：rgb（255、166、0）；
}
#测试按钮2{
顶部：50px；
左：215px；
边框：1px实心rgb（255、166、0）；
}
#testButton2：悬停{
背景色：rgb（255、166、0）；
}

在HTML中使用id

tailsButton2

，而在CSS中使用

#testButton2

。当我试图将代码简化到此处时，我犯了一个错误，我已经修复了它。感谢您的关注。您的问题是由覆盖按钮1的按钮2的

.testButtonsDiv

引起的。你想实现什么？我的最终目标是把9个按钮叠加在一个特定位置的图像上，我在这里删掉了除了2个以外的所有按钮，以缩短重复的代码。我的目标是让每个按钮都具有覆盖效果，而不仅仅是顶部的按钮。但是，如果不将每个按钮都包含在自己的div中，我就无法弄清楚如何让每个按钮转到我想要的位置。它就像一个符咒。看来我想得太多了。我想这是我用另一种方式思考的结果。非常感谢你！