css - CSS next element (none sibling) selector

Question

I have an HTML structure like this:

<svg>
   <path/>
</svg>
<img/>

Is there a way to do something like "display:block;" to the <img/> when <path/> is hovered, with CSS only?

Answer 1

This is only possible if it is possible to select the parent of <path/> which unfortunately is not possible, so your answer is this is not possible.

If you would like to try this with javascript I can provide you a jQuery (not the best) example.

$('svg > path').hover(function(){
   $(this).parent().next().addClass('hover');
}, function() {
   $(this).parent().next().removeClass('hover');
});

Then in your css you can do.

img.hover{
   // These styles take effect when you hover `<path>`
}