0

Contexto

Tenho o seguinte código

<div id="id1"></div>
<div id="id2"></div>

Como poderia fazer com que ao passar o mouse em #div1 e #div2, apenas a #div1 fique com o funde verde?

1
  • Allan, obrigado por sua edição! 27/01/2021 às 16:28

3 Respostas 3

1

Aqui tem um workaround com CSS. O pulo do gato é o column-reverse aliado ao seletor irmão ~, no código abaixo segue o exemplo

.container {
    display:flex;
    flex-direction: column-reverse;
}

#id1:hover {
    background: green;
}
[id^="id"] {
    border: 1px solid black;
}
[id^="id"]:hover ~ #id1 {
    background: green;
}
<div class="container">
    <div id="id3">3</div>
    <div id="id2">2</div>
    <div id="id1">1</div>
</div>

2
  • 1
    Sua resposta é mais apropriada que a minha porque não utiliza javascript! Ganhou meu voto, parabéns. 27/01/2021 às 17:01
  • @RafaelSalomão valeu a força man!
    – hugocsl
    27/01/2021 às 19:00
1

Alternativamente às respostas já apresentadas, pode optar por selecionar apenas o primeiro elemento filho ao passar por cima do seu pai. Algo como:

.container:hover div:first-child {
  background-color: green;
}
<div class="container">
  <div>AAA</div>
  <div>BBB</div>
  <div>CCC</div>
</div>

1
  • Parabéns, bem enxuto o código! 28/01/2021 às 0:47
0

$('div.mudar_cor').hover(function(){
  $('div.vermelho').css('color','red');
}, function() {
  $('div.vermelho').css('color','black');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='mudar_cor vermelho'>Olá, sou a div vermelha.</div>
<br/><br/><br/>
<div class='mudar_cor'>Olá, sou a div verde.</div>

Adicione um seletor a div que deve ficar verde quando houver ação do mouse sobre ela.

  <div class='mudar_cor vermelho'>Olá, sou a div vermelha.</div>
  <div class='mudar_cor'>Olá, sou a div verde.</div>

Adicione no seu JS as seguintes regras:

    $('div.mudar_cor').hover(function(){
     $('div.vermelho').css('color','red');
   }, function() {
      $('div.vermelho').css('color','black');
   });

Utilize o javascript para fazer isso, se o evento hover ocorrer sobre a div com a classe mudar_cor então altere a div com o seletor de classe definido como vermelho, se houver a saída do mouse de cima de uma dessas duas divs apenas retorne para a cor normal. Repare que passei duas funções para o evento houver, a primeira para alterar a cor caso haja interação do usuário com o mouse e a segunda seria o mouse leave, para retornar ao default, sem interação do usuário.

3
  • No caso não seria isso. O que eu quero, por exemplo, é que quando você passasse o mouse sobre a div "vermelha" ou "verde", apenas a div "vermelha" mudasse de cor
    – Eduardo
    27/01/2021 às 16:05
  • Vê se isso que você quer, alterei minha resposta.... 27/01/2021 às 16:22
  • Isso mesmo, muito obrigado :)
    – Eduardo
    27/01/2021 às 21:24

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 .