How to apply a style to two different elements using :Hover?

Question

Considering:

HTML

<div id="div1">
    <p>Elemento 1</p>
</div>
<div id="div2">
    <p>Elemento 2</p>
</div>

How can I use the :hover in the div1 to change style properties of div2?
I tried the following, but to no avail:

CSS

#div2, #div1:hover {
    background-color: white;
}

Until the moment the mouse enters the div1, works as I want, but when it comes out a problem arises: the div2 continues with the background-color: white. What should I do (using CSS) to make the white background of div2 vanish along with the white background of the other div?

Answer 1

The problem is that it is applying the same rule to two independent selectors, using the "," no relation is created between the selectors.

Using the brother selector (General Sibling Selector) "~" you can apply the rule of hover on the brother whose selector is on the right. Thus the rule is:

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

Reading the rule would be:

When mouse over element with id div1, select all brothers whose id is div2 and apply the rule below.

Take a look at this Jsfiddle to see the code working. In case I put the black background to have contrast.

There is a variation, the direct brother selector "+" that only picks up the subsequent siblings and antecedent to the elements of the left selector, can be useful as well.

In addition to these, there is also the direct child selector (Child Selector) ">", which can also be used, but not for this specific case. And the descending selector (Descendant Selector) " (space), which is more comprehensive than the Child selector.

For more details of a look at:

1. https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_selectors
2. https://developer.mozilla.org/en-US/docs/Web/CSS/General_sibling_selectors
3. https://developer.mozilla.org/en-US/docs/Web/CSS/Child_selectors
4. https://developer.mozilla.org/en-US/docs/Web/CSS/Descendant_selectors