Skip to main content
3 de 3
adicionou 11 caracteres ao conteúdo

Como trocar a cor de botões com o hover sobre apenas um botão (CSS)

Bom, meu problema é o seguinte:

Tenho cinco botões, em ordem horizontal. Cada um tem uma cor específica no hover. Ao colocar o mouse sobre algum deles, todos os outros deveriam assumir a cor que o selecionado tem.

Eu consegui usar esse efeito com sucesso no primeiro botão, já que os demais mudaram de cor; ao aplicar o código nos outros, apenas os botões à frente (à direita) mudaram de cor, e não consigo fazer com que o botão anterior mude.

Pra demonstrar, vou simular o terceiro botão, chamarei de "box3". Estou tentando o seguinte:

box3:hover ~ box1 {
    background-color:red;
}
box3:hover ~ box2 {
    background-color:red;
}

^ os dois acima são os que ficam à esquerda e não mudam de cor

box3:hover ~ box4 {
    background-color:red;
}
box3:hover ~ box5 {
    background-color:red;
}

obs: não coloquei o box3 para mudar de cor pois este é hover de outro elemento, então desnecessário.

Já tentei trocar o ~ por +, > e por espaço vazio também. Valeu!!