How to apply style to a group of selectors

Question

Context

I have the following code

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

How could I make that by passing the mouse on #div1 and #div2, only the #div1 stay with the green sling?

Answer 1

Here’s a workaround with CSS. The cat jump is the column-reverse allied to the brother selector ~, in the code below follows the example

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

Answer 2

Alternatively to the answers already given, you can choose to select only the first child element by going over your father. Something like:

.container:hover div:first-child {
  background-color: green;
}

<div class="container">
  <div>AAA</div>
  <div>BBB</div>
  <div>CCC</div>
</div>

Answer 3

$('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>

Add a dial to div that should turn green when there is mouse action on it.

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

Add the following rules to your JS:

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

Use javascript to do this, if the Hover event occurs over the div with the class mudar_cor then change the div with the class selector set to red, if there is mouse output from the top of either of these two Divs only return to the normal color. Note that I passed two functions for the event there is, the first to change the color if there is user interaction with the mouse and the second would be the mouse Leave, to return to default, without user interaction.