2013-09-03 2 views
5

Ho una struttura HTML come questo:CSS elemento successivo (nessuno di pari livello) Selettore

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

+2

No, sebbene in base allo svg e ai percorsi utilizzati, è possibile applicare il passaggio del mouse su 'svg'? – SmokeyPHP

+2

Letture extra: http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector – SmokeyPHP

+0

@SmokeyPHP Smetti di introdurre così tanti buoni commenti così velocemente che posso alzarmi solo ogni cinque secondi. :) – insertusernamehere

risposta

2

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>` 
} 
+0

Nota: la domanda così com'è attualmente ha una risposta di "NO" poiché specifica "solo CSS", ma questo può naturalmente essere ottenuto con JavaScript ([esempi jQuery] (http://stackoverflow.com/questions/ 8055830/select-sibling-of-parent-on-hover-with-jquery # answer-8055865)) – SmokeyPHP

+0

@SmokeyPHP sì, lo so. – iConnor

+0

Sì, era più per gli altri spettatori di questa risposta che per te. – SmokeyPHP