CSS elemento successivo (nessuno di pari livello) Selettore

Question

Ho una struttura HTML come questo:

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

C'è un modo per fare qualcosa di simile "display: block;" allo < img/> quando il percorso </> è al passaggio del mouse, solo con i CSS?

Answer 1

Questo è possibile solo se è possibile selezionare il genitore di <path/> che purtroppo non è possibile, quindi la risposta è questa non è possibile.

Se si desidera provare questo con javascript posso fornire un esempio jQuery (non il migliore).

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

Quindi nel tuo css puoi farlo.

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