Html help

i am trying to lengthen a div box when a mouse hovers over it this is my code but it doesn’t work can anyone help me fix it?
    <script>
    function bigbox1(x)
{
   x.style.height="40px";
   x.style.width="300px";
}

function smallbox1(x)
{
   x.style.height="40px";
   x.style.width="200px";
}
    </script>
   
<div onmouseover="bigbox();" onmouseout="smallbox1();" id="box1" style="background-color:#5882FA;height:40px;width:200px">
    <h1 style="color:#A9F5F2">Hello</h1>
</div>

ur not passing in x you fucking reatrded, also just fucking learn angular and structure ur project properly with scaffolded css sheets that link up, use bower, use grunt, use yeoman, get jquery, and use jquery animate function inside ur controller scope function that gets triggered by ng-mouseenter and ng-mouseleave, to animate the css height etc........., all this manual dom manipulation shit is for the birds.