Create two different colors for changing divs when falling over the main div

Question

I have 3 divs. I would like to change some things in 2 of these divs when I hang over the "main" / "first" div. I'm really, really trying to avoid using Javascript / jQuery here.

I am sure that this can be done, I vaguely remember how long I read about it, but I can not find the link again, and my previous searches did not help, perhaps because I could not use the correct conditions.

Here's the code : HTML:

<div id=one></div>
<div id=two></div>
<div id=three></div>

CSS

#one{background-color:blue;width:50px;height:50px;float:left;}
#two{background-color:green;width:50px;height:50px;float:left;}
#three{background-color:red;width:50px;height:50px;float:right;}

#one:hover > #two + #three { background-color: yellow; }

Can anybody help? How to make the other two divs change color when you hover over the first?

Answer 1

?

Fiddle

#one:hover ~ #two , 
#one:hover ~ #three  
{ background-color: yellow; }

, > , , + .

Answer 2

2 , .

-, 2 id "", .

-, > + . , :

#one
    #two //Children of #one
    #three //the selected one (children on #one)

:

#one:hover ~ #two, #one:hover ~ #three { background-color: yellow; }