将事件悬停在 div 的隐藏部分

Question

我有以下带有css的示例html。我的问题是，当我将鼠标移到父 html 元素的顶部锥体上时，悬停角色将变为活动状态。但它不应该是，因为它是父母的隐藏部分。它在火狐中正常工作，但在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%);
}

Answer 2

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

body {
  margin: 0;
}
svg {
  height: 100vh;
}
.child:hover {
  fill: black;
}

<svg viewbox="0 0 100 100">
  <defs>
      <clipPath id="clipPath">
        <circle r="50" cx="50" cy="50"/>
      </clipPath>
  </defs>
  <rect class="child" x="0" y="0" width="100" height="40" fill= "blue" clip-path="url(#clipPath)"/>
  <rect x="0" y="40" width="100" height="60" fill="red" clip-path="url(#clipPath)"/>
</svg>