CSS color child on Hover

Question

i got this:

<div id="father">
    <span class="child1"><span>
    <div class="child2"><div>
</div>

i need to change text color of child2 on father:hover, and i was able to do that, but when i hover on child1, child2 loose color and is displayed normally, how can i set hover on child1 so do not loose hover effect ?

i've already tried with and it doesn't work

.child1:hover .child2{ color: #eed847; }

thanks

Answer 1

.child1 is not a parent of .child2 in your example, which is expected by your use of space in the selector.

The following selector should work, when any of .child1 or .child2 is hovered.

#father:hover .child2 { ... }

Demo

Answer 2

If you don't want the text color of the second child to change you could use a workaround like this:

#father:hover .child2 {color: #eed847;}
.child2:hover {color: #000!important;}

In this example the text of child2 will stay black when you only hover over child2.

Answer 3

You could use a sibling selector in your CSS, Chris Coyier has written a fair bit about them here.

.child1:hover + .child2 { #some css };

Answer 4

The closing tags of HTML were invalid. I modifed your HTML and added css for your needed behaviour.

HTML

<div id="father"> <span class="child1">child1</span>
    <div class="child2">child2</div>
</div>

CSS

#father {
    width: 100px;
    height: 100px;
    background-color: cornflowerblue;
}
.child1 {
    background-color: green;
}
.child2, #father span.child1:hover + div.child2 {
    background-color: blue;
}
#father:hover .child2 {
    background-color: red;
}

Working Fiddle