Question

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

.child1, .child2{
visibility:hidden;
}

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

正如您所看到的，每当我悬停父母时，孩子都会变得可见。到目前为止很容易。

现在这里有一个棘手的部分：当我将鼠标悬停在其中一个孩子身上时，我希望所有其他孩子再次隐藏起来。因此，当我将鼠标悬停在child1上时，child2将不再可见。我想“撤消”父母的徘徊，可以这么说，只留下我正在徘徊的孩子。

如何覆盖或撤消父级：悬停？

修改我找到了这个，这是正确的方向：

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

基本上，当父AND 1都悬停时，该样式适用于child1。这就是我正在寻找的，但现在的问题是，如何将样式应用于child2而不是child1？

EDIT2： 另一个想法是使用这样的东西：

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

这将选择父项中不是child1的所有子项并将样式应用于它们。同样，一个问题：只有在单独悬停父母时才会触发此问题。当父AND 1被悬停时，如何触发这种完全相同的效果？

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; 
}

所以基本上，当我单独盘旋父母时，所有孩子都是“半透明的”，当我将父母和孩子盘旋时，那个孩子就会变得完全可见。它与最初的想法有点不同，但结果还不错。

覆盖父级：悬停在子级上：悬停

1 个答案: