CSS - On Hover, Show 'Niece'

Question

Here's the code I have:

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



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

What I've been trying to do, is make hoverDivShow appear when hoverDiv is hovered over.

The HTML won't be able to change.

I've looked elsewhere, and have been unable to find any solutions. Not really sure what I'm doing right/wrong. Help would be nice.

Thanks!

Answer 1

You need to use .hoverDiv:hover ~ div .hoverDivShow as the "niece" selector. The idea is to select a <div> that is the sibling of .hoverDiv, then select a child of that sibling that has the class hoverDivShow.

Here's a working demo:

.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>