Hover event on hidden part of the div - html

Question

I have the following sample html with css.
My probem is, when I move the mouse over the top coners of the parent html element, the hover role become active. But it should not be, because it is a hidden part of the parent.
It is working correctly in firefox, but not in chrome, opera, ie or edge.
Any suggestions?
It is a browser related bug or it is working as intended?
If I remove the position properties from the css, then it is working properly, but is not an option.
.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

For a completely round cut, use this:
Add this:
.perent {
-webkit-clip-path: circle(50.0% at 50% 50%);
clip-path: circle(50.0% at 50% 50%);
}

Answer 2

Although I am not sure if it is a browser bug or not, but I can suggest using 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>