How to change the color of several Ivs at the same time with Hover?

Question

I’m doing a project where it has 8 Ivs. At first, they all have the white color, but when the mouse is passed on top of each one, the colors change. I would like to make sure that when you hover over the last div, all the previous ones take on their respective colors as if I had Hover in all... It is a very important project!! I thank you in advance!!

code:

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

Answer 1

Here’s a CSS-only answer. I didn’t touch anything in your CSS, the only thing I did was put the Cards inside one container flex, but with the flex-direction of row-reverse, this made with the divs were only on the screen back to front, so it was possible to use the selector ~ and have the desired effect!

Follow the image code above, recommend that study on FlexBox if you have any questions.

Passing the mouse in div 6 all previous Ivs takes the color of the respective background-color.

.cards{
    background-color: #fff;
    height: 150px;
    margin: 10px 5px 5px;
    display: inline-table;
    transition: .3s;
    cursor: pointer;
    color:black;

    width: 50px;
}

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


.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;
}
  
.container {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
}

<div class="container">
  <div class="cards uniao">6</div>
  <div class="cards solidariedade">5</div>
  <div class="cards envolv">4</div>
  <div class="cards pertence">3</div>
  <div class="cards dizer">2</div>
  <div class="cards tolerancia">1</div>
</div>

Answer 2

You can use javascript for this.

var divRed = document.getElementById('red');
var divBlue = document.getElementById('blue');
var divGreen = document.getElementById('green');

divGreen.addEventListener('mouseover', function() {
  divRed.classList.add('red');
  divBlue.classList.add('blue');
});

divGreen.addEventListener('mouseout', function() {
  divRed.classList.remove('red');
  divBlue.classList.remove('blue');
});

.square {
  width: 50px;
  height: 50px;
  border: 1px solid #c1c1c1;
}

#red:hover,
.red {
  background-color: red;
}

#blue:hover,
.blue {
  background-color: blue;
}

#green:hover,
.green {
  background-color: green;
}

<div id="red" class="square"></div>
<div id="blue" class="square"></div>
<div id="green" class="square"></div>

Answer 3

You can import the Jquery library and follow the following example:

<!DOCTYPE html>
<html>
<head>
	<title>teste</title>
	<link rel="stylesheet" href="style.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
	<div class="teste">aaaaa</div>
	<div class="teste">aaaaa</div>
	<div class="teste">aaaaa</div>
	<div class="teste">aaaaa</div>
	<div class="teste">aaaaa</div>
	<div class="hover">aaaaa</div>

	<script type="text/javascript">
		$(".hover").mouseenter(function(){
			$(".teste").css("background", "blue");
			$(".hover").mouseout(function(){
				$(".teste").css("background", "white");
			});
		});
	</script>
</body>
</html>

The event mouseenter is what adds the colors in the div’s above when placing the mouse in the last div. Already the event mouseout is what removes colors when the mouse is removed from the last div.