覆盖父级：悬停在子级：悬停答案

【问题标题】：Override parent :hover on child :hover覆盖父级：悬停在子级：悬停
【发布时间】：2012-10-07 23:30:45
【问题描述】：

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

.child1, .child2{
visibility:hidden;
}

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

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

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

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

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

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

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

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

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

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

【问题讨论】：

不使用 CSS。您不能使用 CSS(3) 选择父元素或先前的兄弟元素。
这将选择 .child 元素，但只选择当前悬停的 .child #parent:hover .child:hover ~ .child { 之后的元素
onMouseOver 仅在没有其他元素“高于”您指向的元素时应用，因此您一次只能悬停一个元素。没有办法让 css :hover 表现得那样吗？一次只能悬停一个元素？
如果所有未悬停的子项都被隐藏，您将如何将鼠标悬停在任何子项上使其可见？
子元素在父元素的“内部”。在悬停父级时，子级可见。所以我将鼠标悬停在一个可见的孩子上并保持该孩子可见。

标签： css hover css-selectors

【解决方案1】：

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

.child1, .child2{ 
    opacity:0; 
}

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

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

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

【讨论】：