Html 修复了hero top元素未接收指针事件的问题

我正在尝试实现一个固定顶部的英雄面板，主要内容可以滚动并隐藏它：

.root{
宽度：300px；
高度：300px；
溢出：隐藏；
位置：相对位置；
}
.固定顶{
位置：绝对位置；
排名：0；
左：0；
右：0；
底部：0；
}
.英雄{
宽度：100%；
身高：100%；
背景：绿色；
}
.英雄span:悬停{
颜色：黄色；
}
.卷轴包装{
宽度：100%；
身高：100%；
溢出y：自动；
位置：相对位置；
}
主要{
位置：绝对位置；
顶部：100px；
背景：黄色；
宽度：100%；
最小高度：500px；
}

悬停以变黄。。。不工作：-(
内容。。。

这是因为

滚动包裹

元素位于

固定顶部

元素的顶部，防止其触发

悬停

事件。您可以通过在控制台的

元素

选项卡中进行检查来查看它

要绕过它，您可以更改

.hero span:hover{...}

到

<>但是，<>强>事件可能不如你所愿的那样工作< /强>。每当你的鼠标移动到根>代码>元素时，<代码>颜色< /代码>将改变，而不是<代码>固定顶元素。因此，你可以考虑重构元素。

希望这有帮助

.root{
宽度：300px；
高度：300px；
溢出：隐藏；
位置：相对位置；
}
.固定顶{
位置：绝对位置；
排名：0；
左：0；
右：0；
底部：0；
}
.英雄{
宽度：100%；
身高：100%；
背景：绿色；
}
.root:悬停。固定顶部。英雄跨度{
颜色：黄色；
}
.卷轴包装{
宽度：100%；
身高：100%；
溢出y：自动；
位置：相对位置；
}
主要{
位置：绝对位置；
顶部：100px；
背景：黄色；
宽度：100%；
最小高度：500px；
}

悬停可变为黄色…不工作：-(
内容。。。

您可以使用.fixed top元素上的

position:sticky

属性将其固定到div顶部，与滚动无关（例如position:fixed，但它在div内部工作）。您还需要将

overflow:scroll

属性设置为container元素：

正文{
保证金：0；
}   
.根{
宽度：300px；
高度：300px；
溢出y：滚动；
位置：相对位置；
}
.固定顶{
位置：粘性；
排名：0；
左：0；
右：0；
}
.英雄{
宽度：100%；
高度：100px；
背景：绿色；
}
.英雄span:悬停{
颜色：黄色；
}
.卷轴包装{
宽度：100%；
身高：100%；
位置：相对位置；
}
主要{
背景：黄色；
宽度：100%；
最小高度：500px；
}

悬停可变为黄色…不工作：-(
内容。。。

请参见我上面的编辑。实际上，我希望用户能够单击hero div中的元素。我认为您的解决方案在这种情况下不起作用，尽管这是一个有趣的想法。

.root:hover .fixed-top .hero span {...}