我有两个默认设置为隐藏的子元素。
.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 悬停时,我如何触发完全相同的效果?
最佳答案
好吧,因为似乎没有正确的方法来做我想做的事,我使用了一些变通方法并使用不透明度解决了它:
.child1, .child2{
opacity:0;
}
#parent:hover .child1,
#parent:hover .child2{
opacity:0.6;
}
#parent:hover > .child1:hover,
#parent:hover > .child2:hover{
opacity:1;
}
所以基本上,当我单独悬停父项时,所有子项都是“半透明”的,而当我悬停父项和一个子项时,该子项变得完全可见。这与最初的想法有点不同,但结果还不错。
关于css - 覆盖父级 :hover on child :hover,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12938870/