Comment montrer un élément en vol stationnaire d'un frère ou d'une sœur?

J'ai testé des sélecteurs CSS. Je souhaite modifier l'affichage de p quand je passe la souris la h3, j'ai donc écrit quelque chose comme:Comment montrer un élément en vol stationnaire d'un frère ou d'une sœur?

div > p{ 
 
    display: none; 
 
} 
 

 
div > h3:hover p{ 
 
    display: block; 
 
}

<div> 
 
    <h3>Lorem ipsum dolor sit amet</h3> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
</div>

mais il ne fonctionne pas. Quel est le problème? Qu'est-ce que je rate?

Source

2017-09-04 Rıfat Tolga Kiran

@kukkuz Vous ne devez pas être le plus récent éditeur pour obtenir des progrès vers le badge Illuminateur, juste * un éditeur *. Aussi, "mais" dans la question n'est pas le début d'une phrase, donc il ne devrait pas être capitalisé. – TylerH

@TylerH n'avait pas l'intention d'être l'éditeur le plus récent ... Je pensais «mais» doit être capitalisé .. bien, que ce soit :) – kukkuz

Utilisation du +adjacent sibling selector

div > p { 
 
    display: none; 
 
} 
 

 
div > h3:hover + p { 
 
    display: block; 
 
}

<div> 
 
    <h3>HOVER ME</h3> 
 
    <p>Lorem ipsum dolor sit amet...</p> 
 
</div>

pour récapituler
h3 p ... signifie p est descendant de h3
h3 + p ... signifie p est un frère suivant immédiatement de h3

Si vous envisagez dans un avenir proche d'avoir d'autres éléments entre h3 et p qu'un General sibling selector ~ aiderait comme dans

div > p { 
 
    display: none; 
 
} 
 
div > h3:hover ~ p { /* notice the general sibling selector */ 
 
    display: block; 
 
} 
 

 
.line{background: red; height: 1px; }

<div> 
 
    <h3>HOVER ME</h3> 
 
    <div class="line"></div> 
 
    <p>Lorem ipsum dolor sit amet...</p> 
 
</div>

Source

2017-09-04 16:38:49

Vous pouvez utiliser le Sélecteur de frère adjacent (+) comme div > h3:hover + p.

Voir la démo ci-dessous:

div>p { 
 
    display: none; 
 
} 
 

 
div>h3:hover+p { 
 
    display: block; 
 
}

<div> 
 
    <h3>Lorem ipsum dolor sit amet</h3> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure 
 
    dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
</div>

Source

2017-09-04 16:39:35 kukkuz

Comment montrer un élément en vol stationnaire d'un frère ou d'une sœur?

Répondre

Questions connexes