1

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;
}
2
  • Fica simples fazer isso com javascript, você já tentou? Commented 12/04/2019 às 18:29
  • Não precisa de js caso vc não possa usar script com CSS da pra fazer tb
    – hugocsl
    Commented 12/04/2019 às 19:08

3 Respostas 3

5

Segue uma resposta só com CSS. Não mexi em nada no seu CSS, a única coisa que fiz foi colocar os Cards dentro de um container flex, mas com o flex-direction de row-reverse, isso fez que com as divs ficassem apenas na tela de traz para frente, assim deu para usar o seletor ~ e ter o efeito desejado!

inserir a descrição da imagem aqui

Segue o código da imagem acima, recomendo que estudo sobre FlexBox caso tenha dúvidas.

Ao passar o mouse na div 6 todas as divs anteriores pega a cor do respectivo 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>

5
  • 1
    Ótima resposta! Não conhecia o seletor ~ do CSS. Commented 15/04/2019 às 13:59
  • @VictorCarnaval valeu jovem, depois da uma olhada nessa documentação que vai te ajudar bastante a entender esses seletores developer.mozilla.org/pt-BR/docs/Web/CSS/Seletores_CSS
    – hugocsl
    Commented 15/04/2019 às 14:11
  • Já estou olhando, muito obrigado e sucessos! Commented 15/04/2019 às 14:22
  • 1
    valeu pela resposta mano!! Commented 15/04/2019 às 17:27
  • @FilipeOliveira sem problemas meu caro! 💪
    – hugocsl
    Commented 15/04/2019 às 17:39
4

Você pode utilizar javascript para isso.

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>

1
  • valeu, nunca usei com js... vou utilizá-lo futuramente... Commented 15/04/2019 às 17:28
1

Você pode importar a biblioteca Jquery e seguir o seguinte exemplo:

<!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>

O evento mouseenter é o que adiciona as cores nas div's acima ao posicionar o mouse na última div. Já o evento mouseout é o que remove as cores quando o mouse for removido da última div.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .