metodo hover css | HTML e CSS

Alguem consegui me explicar o que esta dando errado nesse codigo? Estou tentando fazer um pop up de avaliacao em um site de um trabalho de faculdade, mas nao consigo aplicar o metodo hover a mais de um elemento, exemplo, quando o usuario ficar com o mouse em cima da estrela 5, preciso que as 5 estrelas mudem de cor, mas o hover nao quer funcionar em mais de um elemento

css do codigo

#popUpAv{
    display: flex;
    flex-direction: column;
    position:fixed;
    top: 300px;
    left: 300px;
    width: 300px;
    height: 120px;
    background-color: lightblue;
    padding: 10px;

}
#avaliacoes{
    display: flex;
    flex-direction: row;
}
#x{
    margin-left: 280px;
}
#est5 :hover #est1{
    box-shadow: inset 5em 1em gold;
    color: yellow;

}

html

<div id="popUpAv">
        <img src="x.png" height="15px" width="15px" id="x" >
        <h3>Como esta sua experiencia no site?</h3>
        <div id="avaliacoes">
            <a id="est1"><div id="estrela1"><img src="estrela.png" height="30px" width="30px"></div></a>
            <a id="est2"><img src="estrela.png" height="30px" width="30px" id="estrela2"></a>
            <a id="est3"><img src="estrela.png" height="30px" width="30px" id="estrela3"></a>
            <a id="est4"><img src="estrela.png" height="30px" width="30px" id="estrela4"></a>
            <div id="est5"><img src="estrela.png" height="30px" width="30px" id="estrela5"></div>   

        </div>

Olá Vitor, tudo ok por aí ?

Gostaria de pedir desculpas pelo retorno tardio!

Respondendo ao seu tópico, primeiramente o seu projeto está muito bom, mas para fazer ele funcionar da forma que você deseja você vai precisar fazer algumas mudanças no código para que ele funcione! Sendo eles:

Primeiro vamos transformar os link(a) e div's em uma tag chamada span! E também aproveitamos para remover o style inline do html, pois é recomendado que ele fique no css, além de que ele pode facilmente atrapalhar o desenvolvimento do projeto se estiver no html. A mudança pode ser feita dessa forma:

<div id="avaliacoes">
<span class="fa fa-star checked" id="est1"></span>
<span class="fa fa-star checked" id="est2"></span>
<span class="fa fa-star checked" id="est3"></span>
<span class="fa fa-star checked" id="est4"></span>
<span class="fa fa-star checked" id="est5"></span>
</div>

Algo que você pode não estar entendendo é o nome das classes, mas na verdade elas são uma forma de carregar “estrelas em png neutro”, contudo para que elas funcionem você precisa adicionar um link de stylesheet para que elas sejam carregadas, o link é esse:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

E um detalhe, essa tag de link deve estar na tag head!

Agora em seu arquivo css você deve adicionar no lugar desse trecho de código:

#est5 :hover #est1{
    box-shadow: inset 5em 1em gold;
    color: yellow;
}

Você deve colocar esse trecho de código:

#avaliacoes:hover > span:before {
  box-shadow: inset 5em 1em gold;
color: yellow; 
}
#avaliacoes > span:hover ~ span:before {
  color: black; 
}

Agora por partes, o que aconteceu aqui foi o seguinte:
- Primeiramente eu chamei o id avaliações e coloquei que todos os span´s que estivessem linkados diretamente à ele deveriam ter um box-shadow inset com 5em e 1em de profundidade/comprimento e com a cor gold, e uma color yellow!
- Depois eu chamei novamente o id avaliações e coloquei que todos os span´s com a pseudo-classe :hover e tudo o que viesse antes de todos os próximos span´s que estivessem presentes na página deveriam ser pretos.
Assim você terá um resultado em que as estrelas toda vez que alguém passar o mouse sobre elas aparecerá um fundo gold, e você terá uma intercalação de cores da preta para a amarela.

Caso você queira se aprofundar nas pseudo-classes do CSS vou deixar a documentação delas abaixo, bem como mais um material sobre a tag span:

Também vou disponibilizar o projeto em funcionamento no Code Pen:

Link do Projeto no Code Pen

Em suma era isso, espero ter ajudado, caso precise de mais algo recorra ao fórum, estarei à disposição!

Um grande abraço e bons estudos!

Caso este post tenha lhe ajudado, por favor marcar como solução! ✓.

Mergulhe em programação