Search code examples
htmlcsslayout

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

I am pretty sure this can be done, I vaguely remember reading about it a while ago but I cannot find the link again and my previous searches have not helped, probably because I might not be using the correct terms.

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 someone please help? How do I make the other two divs change color when I hover over the first one?

Solution

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