html - 在 div 的隐藏部分上悬停事件

Question

我有以下带有 CSS 的示例 html。我的问题是，当我将鼠标移到父 html 元素的顶部时，悬停 Angular 色会激活。但它不应该，因为它是父级的隐藏部分。它在 firefox 中可以正常工作，但在 chrome、opera、ie 或 edge 中不能正常工作。

有什么建议吗？

这是浏览器相关的错误还是按预期工作？

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

.perent{
  top: 0px;
  right: 0px;
  width: 500px;
  height: 500px;
  background-color:red;
  border-radius:50%;
  overflow:hidden;
  position:relative;
}

.child{
  width: 1000px;
  height: 200px;
  background-color:blue;
  position:absolute;
}

.child:HOVER{
  background-color:black;
}

<div class="perent">
    <div class="child">
    </div>
</div>

Answer 1

对于完全圆形的切割，使用这个:

添加这个:

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