css - 覆盖父级 :hover on child :hover

Question

我有两个默认设置为隐藏的子元素。

.child1, .child2{
visibility:hidden;
}

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

如您所见，每当我将鼠标悬停在父项上时，子项就会变得可见。到目前为止很容易。

现在这是棘手的部分:当我将鼠标悬停在其中一个 child 上时，我希望所有其他 child 再次隐藏起来。所以当我将鼠标悬停在 child1 上时，child2 应该不再可见。我想“撤消” parent 的悬停，可以这么说，只让我悬停的 child 可见。

如何覆盖或撤消 parent:hover ？

编辑:我发现了这个，它正朝着正确的方向发展:

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

基本上，当 parent 和 child1 都悬停时，样式将应用于 child1。这就是我要找的东西，但现在的问题是，如何将样式应用于 child2 而不是 child1？

编辑2:另一个想法是使用这样的东西:

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

这将选择不是 child1 的父项的所有子项并将样式应用于它们。再一次，一个问题:这只有在单独悬停父级时才会触发。当 parent AND child1 悬停时，我如何触发完全相同的效果？

Answer 1

好吧，因为似乎没有正确的方法来做我想做的事，我使用了一些变通方法并使用不透明度解决了它:

.child1, .child2{ 
    opacity:0; 
}

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

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

所以基本上，当我单独悬停父项时，所有子项都是“半透明”的，而当我悬停父项和一个子项时，该子项变得完全可见。这与最初的想法有点不同，但结果还不错。