0

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

.child1, .child2{
visibility:hidden;
}

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

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

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

如何覆盖或撤消 parent:hover ？

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

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

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

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

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

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

4

1 回答 1

2

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

.child1, .child2{ 
    opacity:0; 
}

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

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

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

于 2012-10-17T18:48:26.660 回答