Question

这是我的代码：

<div class="hoverDiv">Hover</div>
<div>
    <div class="hoverDivShow"></div>
</div>



.hoverDivShow {
    display: none;
}
.hoverDiv:hover ~ .hoverDivShow {
    display: block;
}

我一直想做的是，当hoverDiv悬停时，会显示hoverDivShow。

HTML将无法更改。

我看过其他地方，但一直找不到任何解决方案。不确定我在做什么是对还是错。帮助会很好。

谢谢！

Answer 1

您需要使用.hoverDiv:hover ~ div .hoverDivShow作为“侄女”选择器。我们的想法是选择一个<div>作为.hoverDiv的兄弟，然后选择具有类hoverDivShow的兄弟姐妹的孩子。

这是一个有效的演示：

.hoverDivShow {
    display: none;
}
.hoverDiv:hover ~ div .hoverDivShow {
    display: block;
}

<div class="hoverDiv">Hover</div>
<div>
    <div class="hoverDivShow">I'm hidden until you hover!</div>
</div>

Answer 2

您的第二个css规则.hoverDiv:hover ~ .hoverDivShow { display: block }使用一般兄弟选择器。您正在使用.hoverDiv类在相同DOM级别上搜索{{1>}后面的所有元素。如果您查看结构，您会注意到这些元素不存在。

As pointed out by Ed Cottrell，确实存在一个带有该类的孩子的兄弟姐妹。因此，使用一般的兄弟选择器，您需要定位该兄弟{child}的孩子hoverDivShow

I made a fiddle for you非常直观地解释了一般兄弟选择器的定位结构。

在您的情况下，您也可以使用相邻的兄弟选择器：

.hoverDiv:hover ~ div .hoverDivShow { [...] }

不同之处在于，如果第一个选择器与第二个选择器匹配，它将仅定位在同一DOM级别的第一个选择器之后的第一个元素。在w3schools上查看我的小提琴和this explanation。

CSS - On Hover，Show'Niece'

2 个答案: