Am fumbling all over with my fuctions... mouseover <js>

Am trying to add css styles to my classes.... what am i doing wrong???

//In the JS:

document.getElementsByClassName("header").addEventListener("mouseover", mouseOver);
function mouseOver() {
document.getElementsByClassName("header").$("header").addclass("mouseover")}
document.getElementsByClassName("header").addEventListener("mouseout", mouseOut);
function mouseOut() {
document.getElementsByClassName("header").$("header").addclass("mouseout");}

//In the CSS:
.header {
display: flex;
justify-content: space-between;
padding-bottom: 10px;
text-decoration: rgb(108, 141, 240);
text-transform: uppercase;
}
.mouseover {
transition: 3s;
filter: brightness(20%);
}
.mouseout {
display: flex;
justify-content: space-between;
padding-bottom: 10px;
text-decoration: rgb(222, 233, 14);
text-transform: uppercase;
}
.header:hover {
display: flex;
justify-content: space-between;
padding-bottom: 10px;
/text-decoration: rgb(151, 160, 189);/
text-transform: uppercase;
transition: 1s;
filter: brightness(15%);
}