hover on child div do not trigger parent div hover

Question

Given JSX

import "./styles.css";

export default function App() {
  return (
    <div class="parent">
      <div class="child"></div>
    </div>
  );
}

and CSS

.parent{
  position:relative;
  background-color:blue;
  width:100%;
  height:20px;
 
}
.parent:hover{
  background-color:red;
}

.child{
  position:absolute;
  height:50px;
  border: 2px solid steelblue;
  
}
.child:hover{
  border: 2px solid green;
}

See codesandbox

Is there a way to disable parent div hover (stay in blue color) when hover over the child div (but not parent div) e.g., in orange rectangle position?