Html 悬停不'；在分层单元上不工作

我在同一位置上有同样大小的div。但是，它们没有背景，因此您看不到元素位于不同的容器中。 我现在遇到的问题是，悬停事件只会在最后一个容器中的元素上触发，因为它是在其他容器之上分层的

#主{
背景：黄色；
宽度：300px；
高度：300px；
位置：绝对位置；
左：30px；
顶部：30px；
z指数：1；
}
.出去{
宽度：300px；
高度：300px；
位置：绝对位置；
左：0；
排名：0；
背景：无；
z指数：5；
}
.在{
位置：绝对位置；
宽度：40px；
高度：40px；
z指数：10；
不透明度：0.5；
}
.out:n类型（1）.in{
顶部：40px；
左：40px；
背景：绿色；
}
.out:n类型（2）.in{
顶部：120px；
左：120px；
背景：红色；
}
.out:第n个类型（3）.in{
顶部：200px；
左：200px；
背景：蓝色；
}
.in:悬停{
不透明度：1.0；
}

第一组
第2组
第3组

如果可能的话，我会像你说的那样把它们放在同一个容器中。

---

很抱歉，我不能仅对此发表评论。

您可以将所有这些元素放入同一父元素（

.out

）中，并使用

：nth-child（）

选择器获取不同的颜色和位置。然后悬停工作：

#主{
背景：黄色；
宽度：300px；
高度：300px；
位置：绝对位置；
左：30px；
顶部：30px；
z指数：1；
}
.出去{
宽度：300px；
高度：300px；
位置：绝对位置；
左：0；
排名：0；
背景：无；
z指数：5；
}
.在{
位置：绝对位置；
宽度：40px；
高度：40px；
z指数：10；
不透明度：0.5；
}
.出.入：第n个孩子（1）{
顶部：40px；
左：40px；
背景：绿色；
}
.出.入：第n个孩子（2）{
顶部：120px；
左：120px；
背景：红色；
}
.出.入：第n个孩子（3）{
顶部：200px；
左：200px；
背景：蓝色；
}
.in:悬停{
不透明度：1.0；
}

第一组
第2组
第3组

我通过添加

指针事件来修复它：无

到

.out

和

指针事件：自动到

中的

。嗯