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!!
pointer-events
:)