CSS - On Hover,Show'Niece'

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>