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; }