Making Two Other Div's Change Color When Hovering Over Main Div

I have 3 div's. I would like to change some stuff in 2 of those div's when I hover over the 'main'/'first' div. I am really, really trying to avoid any use of Javascript/jQuery, he

Solution 1:

DO you mean like this?

Fiddle

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

Issue is that > mean it is immediate descendant selector and combination of selector with + won't work.

Solution 2:

You have 2 things to know.

First, you cant select 2 elements by id in one "rule", you need to use comma.

Second, > mean children of and + right next to of. So your rule mean :

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

Your rule should look like this :

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