Hover in DIV1 change DIV2 with CSS

Are using the wrong markers, see this example:

#pai:first-child:hover ~ #div2 {
    background: #999
}

<div id="pai"> 
    <div id='div1'>CONTEUDO 1</div>
</div>

<div id='div'>NADA</div>
<div id='div'>NADA</div>
<div id='div'>NADA</div>

<div id='div2'>CONTEUDO 2</div>

If they are not relatives you can not find, but you can indicate an element that is relative and navigate your children to indicate the hover.     

With javascript it is possible.

Here is an example using jquery:

$("#div1").hover(function() {
  $("#div2").toggleClass("vermelho");
}, function() {
  $("#div2").toggleClass("vermelho");
});

#div1, #div2 {
  width: 100px;
  height: 100px;
  border: solid 1px #000;
}

.azul {
  background-color: #00F;
}

.vermelho {
  background-color: #F00;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><divid="pai"> 
    <div id="div1" class="azul"></div> 
</div>
<div id="div2" class="vermelho"></div>

Hello,

Currently it is not possible to select the parent of an element via CSS.

All selectors currently available are in the specifications:

• CSS3 Selectors
• CSS2 Selectors

For the time being, this behavior is only possible with JavaScript

The Selectors Level 4 Working Draft includes% with% pseudo-class that works the same as the jQuery implementation . Until August 2017, this is not supported by any browser .

For the time being it is not possible via css, but you can do this behavior via Javascript according to previous examples. You can change the behavior of an element within the same container, or select sub elements.

#pai div,
#div3 {
  width: 100px;
  height: 100px;
  border: solid 1px #000;
}

.azul {
  background-color: #00F;
}

.vermelho {
  background-color: #F00;
}


#div1:hover + #div2,
#pai:first-child:hover + #div3,
#pai:last-child:hover + #div3
{
  background-color: #0F0 !important;
}

<div id="pai"> 
    <div id="div1" class="azul"></div> 
    <div id="div2" class="vermelho"></div>
</div>
<div id="div3" class="vermelho"></div>

Try:

#div1:hover + #div2 {
    background-color:red;
}

or

#div1:hover ~ #div2 {
    background-color:red;
}

Take a look at:

link

There is. Example

<div id="pai"> 
    <div id="div1"></div> 
</div>
<div id="div2"></div>

<style>
    #div1:hover #div2{
        background-color:red;
    }
</style>