Hover event on hidden part of the div

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>