Preciso fazer com que aos links mudem de cor ao fazer um hover em cima do cabeçalho.

Oi pessoal!

Estou fazendo um site e preciso que os links do cabeçalho mudem de cor ao passar o mouse em cima do header. Só consegui fazer o header mudar de cor

HTML:

<header class="cabecalho">

            <h1 class="cabecalho__titulo">THE RITZ <br> TUXEDOS & SUITS</h1>
            <ul class="cabecalho__lista">
                <li class="cabecalho__item"><a class="cabecalho__link" href="index.html">HOME</a></li>
                <li class="cabecalho__item"><a class="cabecalho__link" href="#">SUITS</a></li>
                <li class="cabecalho__item"><a class="cabecalho__link" href="html/about-us.html">ABOUT US</a></li>
                <li class="cabecalho__item"><a class="cabecalho__link" href="html/contact.html">CONTACT</a></li>
            </ul>

        </header>

CSS:

.cabecalho{
    align-items: center;
    display: flex;
    height: 10vh;
    justify-content: space-between;
    padding: 1em 1.5em;
    transition: 1s;
}

.cabecalho__titulo{
    color: var(--branco);
    font-family: var(--fonte-logo), sans-serif;
    font-size: 1.8em;
    padding: 1em;
    text-align: center;
    width: 30%;
}

.cabecalho__lista{
    display: flex;
    justify-content: space-between;
    padding: 1em;
    text-align: center;
    width: 25%;
}

.cabecalho__link{
    color: var(--branco);
    font-family: var(--fonte-link), sans-serif;
    text-decoration: none;
}

JS:

var cabecalho = document.querySelector('.cabecalho');
var link = document.querySelectorAll(".cabecalho__link");

cabecalho.addEventListener("mouseover", function() {
    this.style.backgroundColor = "rgb(150, 150, 150)";
}) 

cabecalho.addEventListener("mouseout", function() {
    this.style.backgroundColor = "transparent";
})

Desde já, agradeço!