Estou fazendo um projeto no qual o mesmo tem 8 divs. A princípio, todas elas têm a cor branca, porém, quando o mouse é passado encima de cada uma, as cores se alteram. Eu gostaria de fazer com que ao passar o mouse encima da última div, todas as anteriores assumissem as suas respectivas cores como se eu estivesse com hover em todas... É um projeto muito importante!! Agradeço desde já!!
código:
/*Cor padrão das divs*/
.cards{
background-color: #fff;
height: 150px;
margin: 10px 5px 5px;
display: inline-table;
transition: .3s;
cursor: pointer;
color:black;
}
/*Cor mudando de cada div com hover*/
.coop:hover{
background-color: yellow;
}
.aceito:hover{
background-color: rgb(166, 255, 34);
}
.tolerancia:hover{
background-color: rgb(22,22,22);
color: white;
}
.dizer:hover{
background-color: #3cc7f2;
}
.pertence:hover{
background-color: #aa0a17;
}
.envolv:hover{
background-color: orange;
}
.solidariedade:hover{
background-color: #ff5252;
}
/*Aqui eu tentei fazer com que a class União (um card/div específico) ao colocar hover, trocasse a cor de todas as divs como se elas estivessem com o mouse hover*/
.uniao:hover ~ .tolerancia{
background-color: rgb(22,22,22);
color: white;
}
.uniao:hover ~ .dizer{
background-color: #3cc7f2;
}
.uniao:hover ~ .pertence{
background-color: #aa0a17;
}
.uniao:hover ~ .envolv{
background-color: orange;
}
.uniao:hover ~ .solidariedade{
background-color: #ff5252;
}