CSS Sélecteur de frères w/ Hover

Donc voici ce que je suis en train de faire:

J'ai deux icônes à côté, et en dessous j'ai deux travées qui sont cachés. Quand j'ai de la souris sur une icône, je veux le correspondant span apparaissent.

------------ Partie HTML -----------------

<span class="icons"><!--ICONS-->
    <li class="oneLI">one</li>
    <li class="twoLI">two</li>
</span>

<span class="popups">
    <span class="one"></span>
    <span class="two"></span>
</span>

--------------CSS Partie --------------

span.popups span.one,span.popups span.two{opacity:0;

span.icons:first-child:hover + span.popups span.one{opacity:1}
span.icons:last-child:hover + span.popups span.two{opacity:1}

Maintenant, évidemment, cela ne fonctionne pas, comment pourrais-je aller sur ce en utilisant uniquement CSS?

http://jsfiddle.net/RLhKK/

Fondamentalement, vous ne pouvez pas, parce que vous ne pouvez pas "revenir en haut" de la hiérarchie. Si vous ne pouvez pas modifier le code HTML pour une raison quelconque, votre meilleur pari est en JavaScript.
possible dupliqué sujet [lien]stackoverflow.com/questions/18749276/...

OriginalL'auteur eklassen | 2014-01-24