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?
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/...
possible dupliqué sujet [lien]stackoverflow.com/questions/18749276/...
OriginalL'auteur eklassen | 2014-01-24
Vous devez vous connecter pour publier un commentaire.
Laissez-moi vous expliquer votre sélecteur de première qui est
Bien, vous essayez de sélectionner la premier enfant imbriqués sous
span.icons
et passez vous de sélectionnerspan.one
imbriquée à l'intérieur d'span.popups
mais vous allez mal ici, vous sélectionnez adjacentesspan
élément ayant.popups
qui n'est pas adjacente à laspan
imbriquée à l'intérieur d'.icons
, mais en général, le sélecteur est mauvais, CSS ne peut pas sélectionner le parent, inshort, CSS ne peut pas revenir en arrière une fois qu'il pénètre dans un élément, il ne peut pas remonter dans la hiérarchie.De sorte que vous ne peut pas le faire de cette façon, vous avez besoin de modifier votre DOM, et d'amener tous les
span
éléments au même niveau, ou cachéspan
devrait être au niveau enfant.Et une autre façon d'y parvenir est par l'utilisation de
position
, que je ne suggère pas ici.Aussi, votre balise n'est pas valide, vous devez avoir
ul
élément autourli
.Permet de modifier le DOM et de voir comment nous pouvons sélectionner
Démo
Comment j'ai réalisé cela?
Demo 2
Vous pouvez utiliser
display
ouvisibilty
bien ainsi, si vous ne voulez pas utiliseropacity
qu'ils sont bien adaptés lorsque vous voulez transit d'un élément à l'aide detransition
.Démo 3 (À l'aide de
transition
si vous allez pouropacity
méthode)opacity
?Patience patience 🙂 je suis d'édition de ma réponse
Comment faire si je veux que la "Passez-Moi" côte à côte?
href="http://jsfiddle.net/CBC8S/3/" >jsfiddle.net/CBC8S/3
OriginalL'auteur Mr. Alien
Vous avez besoin de les popups icônes correspondantes à être frères et sœurs.
Démo
HTML:
CSS:
OriginalL'auteur sundance
Vous pouvez résoudre ce problème en mettant les fenêtres pop-up à l'intérieur des icônes.
Ensuite, vous pouvez y remédier en utilisant des CSS, et de les positionner quelque part d'autre en utilisant le positionnement absolu:
CSS:
HTML:
Violon: http://jsfiddle.net/SK4Np/2/
OriginalL'auteur GolezTrol
Si vous avez besoin de cacher le bloc, vous êtes en vol stationnaire comme je l'ai fait, vous pouvez faire quelque chose comme ceci:
HTML:
CSS:
L'idée est d'utiliser des div parent pour déclencher le hover de l'événement. Après l'événement est pris changement de l'enfant div d'affichage/opacité/la visibilité, etc.
JSFiddle Démo
OriginalL'auteur Romeno