Why won’t onmouseover=” ” work in this specific area?

I’m trying to make a hamburger menu, I have made the actual hamburger, but want to add a border, or maybe slightly increase the size of each div in the hamburger or some other fancy effect.

When I write function that targets this it doesn’t work, however when i set it to change the body backgroundColor it works, or if i set it to open a prompt it works.

what works:

Display: none;
background-color: 'red';
<div class="nav-ham" onmouseover="prompt()">

What isn’t working:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <div class="nav-ham" onmouseover="hamHover()">
        <div class="ham-bars"></div>
        <div class="ham-bars"></div>
        <div class="ham-bars"></div>
    </div>


<script src="script.js"></script>
</body>
</html>

CSS

body {
    background-color: #F9F7F7;
}

.nav-ham {
    position: absolute;
    top: 0;
    right: 5%;
    width: 50px;
    height: 50px;
}

.ham-bars {
    width: 100%;
    height: 15%;
    border-radius: 10%;
    background-color: #112D4E;
}

.nav-ham :nth-child(1) {
    position: absolute;
    top: 15%;
}

.nav-ham :nth-child(2) {
    position: absolute;
    top: 45%;
}

.nav-ham :nth-child(3) {
    position: absolute;
    top: 75%;
}

function hamHover() {
    document.getElementsByClassName('ham-bars').style.height = '20%';
}

I can only come to the conclusion that I’m making a typo I’m not spotting or i have a fundamental misunderstanding of the language, which is most likely given i only just completed the course last week.

I imagine it’s something basic, but I am new to this so forgive me.