Html div隐藏部分上的悬停事件

我有以下带有css的html示例。 我的问题是，当我将鼠标移到父html元素的顶端时，鼠标悬停角色将变为活动状态。但它不应该是，因为它是父对象的隐藏部分。 它在firefox中正常工作，但在chrome、opera、ie或edge中却无法正常工作

有什么建议吗

这是一个与浏览器相关的错误，还是按预期工作

如果我从css中删除位置属性，那么它工作正常，但不是一个选项

.perent{
顶部：0px；
右：0px；
宽度：500px；
高度：500px；
背景色：红色；
边界半径：50%；
溢出：隐藏；
位置：相对位置；
}
.孩子{
宽度：1000px；
高度：200px；
背景颜色：蓝色；
位置：绝对位置；
}
.孩子：悬停{
背景色：黑色；
}

---

对于完全圆形切割，请使用以下方法：

添加以下内容：

.perent {
    -webkit-clip-path: circle(50.0% at 50% 50%);
    clip-path: circle(50.0% at 50% 50%);
}

---

虽然我不确定这是否是一个浏览器错误，但我可以建议使用svg

正文{
保证金：0；
}
svg{
高度：100vh；
}
.孩子：悬停{
填充：黑色；
}

它的可能重复并不能解决我的问题，我的子元素不能被舍入，并且我的父元素溢出已经隐藏。为什么你的子元素不能被舍入？为什么你不能绝对定位它？为了回答你的问题，我们必须知道你有什么限制，否则我们只是在暗中试探。我的解决方案是使用剪辑路径，但如果你只是说你不能使用剪辑路径，那又有什么好处呢？我创建了一个圆形菜单。我的菜单项是倾斜俯冲，在父圆的中心旋转。我不想计算适合父圆边界的圆弧。如果我使用绝对位置，问题仍然会出现。谢谢，这是解决我的问题在铬，但不幸的是剪辑路径不支持在ie.H，thx为您的建议。我曾尝试将您的解决方案集成到我的项目中，使用foreignObject包装我的html标记，但不幸的是ie不支持它。您尝试过内联吗？