Question

I have two child elements which I set as hidden by default.

.child1, .child2{
visibility:hidden;
}

#parent :hover .child1, #parent:hover .child2{
visibility:visible;
}

As you can see, whenever I hover the parent, the children become visible. So far so easy.

Now here’s the tricky part: When I hover over one of the children, I’d like all the other children to become hidden again. So when I hover over child1, child2 should not be visible anymore. I want to ‘undo’ the hovering of the parent, so to speak, and only leave the child visible over which I am hovering.

How do I override or undo the parent:hover ?

Edit:
I found this, which is going in the right direction:

#parent:hover > .child1:hover{
    do something;
}

Basically, when both the parent AND child1 are hovered, then the style applies to child1. This is what I’m looking for, but now the problem is, how do I apply the style to child2 instead of child1?

Edit2:
Another idea would be to use something like this:

#parent:hover >.children:not(.child1){
    do something;
}

This selects all children of the parent which are not child1 and applies the style to them. And again, a problem: This is only triggered when hovering the parent alone. How can I trigger this exact same effect when the parent AND child1 are hovered?

Answer 1

Okay, since there didn’t seem to be a proper way to do exactly what I wanted, I used a bit of a work-around and solved it using the opacity:

.child1, .child2{ 
    opacity:0; 
}

#parent:hover .child1, 
#parent:hover .child2{ 
    opacity:0.6; 
}

#parent:hover > .child1:hover,
#parent:hover > .child2:hover{
    opacity:1; 
}

So basically, when I hover the parent alone, all children are ‘semi-transparent’, and when I hover the parent AND a child, that child becomes fully visible. It’s a bit different than the original idea, but it turned out okay.