锚悬停和相邻的同级

Question

Imagine this html structure:

<p><a></a></p>
<div><a><img></a></div>

I want to hide all images inside a div after a p tag , to do that, I simple use this code:

p + div {display:none;}

but when I try to show those images by hover the anchor inside the p tag before, it doesn't work the same way by using this:

p > a:hover + div {display:block;}

if I use only p instead:

p:hover + div {display:block;}

it works, but it's not what I pretend.

Since a it's a child of p tag , adjacent sibling "+" doesn't work?

Answer 1

Since a it's a child of p tag, adjacent sibling "+" doesn't work?

Correct. The div is a sibling of the p , not the a .

You could set pointer-events for the p to "none", and pointer-events for the a to "auto".

You could then use your working p:hover + div code, but it would act like it's working for the anchor only:

 p + div { display:none; } p { pointer-events: none; } a { pointer-events: auto; } p:hover + div { display: block; } 

 <p> <a href="#">This is an anchor.</a> <br> Lorem ipsum et cetera. </p> <div> Cool picture: <a> <img src="http://lorempixel.com/50/50"> </a> </div>