How to let the mouse move in.

bold text
how to make the height of the parentDIV become 200px after the mouse is moved into the sonDIV, and the height is also 200px after the mouse is moved into the parentDIV, and height is restored after moving out of the parentDIV

<div id="parent" width="100px" height="50px" >
    <div id="son" width="100px" height="50px"></div>
</div>  
Mar.01,2021

mouseentermouseleave:
var parent=document.getElementById('parent');
parent.onmouseenter=function(){
    this.style.height=200+'px'
}
parent.onmouseleave=function(){
    this.style.height=50+'px'
}
:
 <div id="parent" style="width:100px;height:50px">

1: do not write inline style, the weight is too high, CSS will not be affected.
2:
< style >

can be solved with css.
    -sharpparent{
        height: 50px;
        background: red;
    }
    -sharpson{
        height: 30px;
        background: blue;
    }
    -sharpparent:hover{
        height: 200px;
    }
    -sharpson:hover -sharpparent{
        height: 200px;
    }
</style>
Menu