pseudo-classe 'Hover' não funciona

o hover só funciona quando clico no link, ele precisaria funcionar só com a passada do mouse/dedo

html

<ul class="lista-menu">

                <li class="lista-menu__item">
                    <a href="#" class="lista-menu__link">PROGRAMAÇÃO</a>
                </li>
                <li class="lista-menu__item">
                    <a href="#" class="lista-menu__link">FRONT-END</a>
                </li>
                <li class="lista-menu__item">
                    <a href="#" class="lista-menu__link">INFRAESTRUTURA</a>
                </li>
                <li class="lista-menu__item">
                    <a href="#" class="lista-menu__link">BUSINESS</a>
                </li>
                <li class="lista-menu__item">
                    <a href="#" class="lista-menu__link">DESIGN & UX</a>
                </li>
            </ul>

CSS

@media screen and (min-width: 1024px){
    .banner__titulo{
        font-size: 36px;
        padding: .5em;
    }
    .banner__pesquisa{
        width: 40%;
    }
    .banner__pesquisa::placeholder{
        background-position: 3.3em;
    }
    .opcoes__botao:checked ~ .opcoes__rotulo > .opcoes__item{
        background: var(--azul-gradiente);
        color: var(--branco);
    }
    .opcoes__item{
        padding: 2em 2em;
    }
    .lista-menu__item:hover{
        background: var(--azul-gradiente);
    }
    .lista-menu__item:hover>.lista-menu__link{
        -webkit-text-fill-color: var(--branco);
        text-decoration: none;
    }
}