CSS - On Hover, Show 'Niece'

Question

Here is 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'm trying to do is that hoverDivShow appears when hoverDiv freezes.

HTML cannot change.

I looked elsewhere and could not find any solutions. Not quite sure what I'm doing right / wrong. Help will be enjoyable.

Thanks!

Answer 1

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

Here is 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> 

Answer 2

In your second rule, css .hoverDiv:hover ~ .hoverDivShow { display: block } uses a common sibling selector . You are looking for all elements that follow .hoverDiv at the same DOM level with the hoverDivShow class. If you look at your structure, you will notice that such elements do not exist.

As Ed Cottrell noted, there is a brother with a child who has this class. Therefore, using a common selector, you must target the child of this brother .hoverDiv:hover ~ div .hoverDivShow { [...] }

I made a fiddle for you , explaining very visually the targeting structure of the main selector.

In your case, you can also use a neighboring selector similar to this:

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

The difference is that it will only target the first element immediately after your first selector at the same DOM level if it matches your second selector. Check out my fiddle and this explanation at w3schools.