Html CSS悬停在绝对定位元素的层次结构中不起作用

我正在为滑块制作一个小原型，它可以有多个场景，每个场景都可以有多个带注释的步骤。用户可以通过上下拖动鼠标在场景之间切换，也可以通过鼠标滚动在场景中的步骤之间切换。小型原型（在Chrome中测试）的代码可在以下位置找到：

HTML:

111
112
121
122
211
212

CSS:

#故事容器{
宽度：1031px；高度：580px；
溢出：隐藏；
位置：相对位置；
}
.sceneconainer{
底边：纯黑细；
位置：相对位置；
}
.stepContainer{
位置：绝对位置；
不透明度：0；
顶部：0；左侧：0；
}
.stepContainer:类型的第一个{
不透明度：1；
}
.注释点{
位置：绝对位置；
显示：内联块；
宽度：40px；
高度：40px；
}
.注释点：悬停{
光标：指针；
背景颜色：金色；
}

问题是注释不可悬停。当我们稍微考虑一下时，问题似乎来自这样一个事实：注释包含在绝对定位元素的层次结构中

---

我的第一个想法是（正如在另一个类似的stackoverflow问题中多次提到的那样），z索引存在一些问题，因为有很多元素堆叠在彼此的顶部，但我无法修复它。

这是您的

#storyContainer.sceneContainer>的CSS。在这里您设置了
指针事件：无，它禁用div及其子项的鼠标事件。因此，
a
元素不会向浏览器触发悬停事件

如果删除此CSS，它似乎没有任何影响，但如果需要，则只需在CSS中为
.annotationPoint
s和要单击鼠标悬停等的任何其他元素重置它：

.annotationPoint
{
    pointer-events:initial;
}