Div ne s'affiche pas en survol?

Question

Donc, j'essaie de faire cela quand je survole l'image, la div apparaît. Malheureusement, je ne suis pas en mesure de le faire, et je ne sais pas pourquoi cela ne fonctionne pas.

Voici mon code:

.summary:hover { 
 
    opacity: .6; 
 
    -moz-transition: all .1s ease-in-out; 
 
    -o-transition: all .1s ease-in-out; 
 
    -webkit-transition: all .1s ease-in-out; 
 
    transition: all .1s ease-in-out; 
 
} 
 

 
.summaryOverlay { 
 
    position: absolute; 
 
    margin-left: 5%; 
 
    margin-top: 3%; 
 
    height: 200px; 
 
    width: 280px; 
 
    z-index: 2; 
 
    background-color: #E7DFDD; 
 
    color: #0E0B16; 
 
    font-family: Verdana; 
 
    font-size: 15px; 
 
    opacity: .9; 
 
    -moz-transition: all .1s ease-in-out; 
 
    -o-transition: all .1s ease-in-out; 
 
    -webkit-transition: all .1s ease-in-out; 
 
    transition: all .1s ease-in-out; 
 
    text-align: center; 
 
    display: none; 
 
} 
 

 
.summary:hover .summaryOverlay { 
 
    display: block; 
 
}

<div class="leftAlign" id="lastWish"> 
 
    <img class="summary" alt="the last wish" src="lastWish.jpg" style="width: inherit; height: inherit;" /> 
 
</div> 
 
<div class="summaryOverlay"> 
 
    Geralt is a witcher. 
 
    <br><br> &nbsp;Yet he is no ordinary killer-for-hire. 
 
    <br><br> His sole purpose: to destroy the monsters that plague the world. 
 
    <br><br> But not everything monstrous-looking is evil and not everything fair is good. . . and in every fairy tale there is a grain of truth. 
 
</div>

Answer 1

Parce que .summaryOverlay n'est pas enfant de .summary, comme vous l'avez dit ici:

.summary:hover .summaryOverlay { 
    display: block; 
} 

Vous devez en vol stationnaire .leftAlign (.summary parent) qui est le .summaryOverlay frères et soeurs, vous avez besoin pour cela d'utiliser le adjacent sibling selector +

Remarque: supprimer les styles en ligne, ils sont une mauvaise pratique de les utiliser

.summary:hover { 
 
    opacity: .6; 
 
    -moz-transition: all .1s ease-in-out; 
 
    -o-transition: all .1s ease-in-out; 
 
    -webkit-transition: all .1s ease-in-out; 
 
    transition: all .1s ease-in-out; 
 
} 
 

 
.summaryOverlay { 
 
    position: absolute; 
 
    margin-left: 5%; 
 
    margin-top: 3%; 
 
    height: 200px; 
 
    width: 280px; 
 
    z-index: 2; 
 
    background-color: #E7DFDD; 
 
    color: #0E0B16; 
 
    font-family: Verdana; 
 
    font-size: 15px; 
 
    opacity: .9; 
 
    -moz-transition: all .1s ease-in-out; 
 
    -o-transition: all .1s ease-in-out; 
 
    -webkit-transition: all .1s ease-in-out; 
 
    transition: all .1s ease-in-out; 
 
    text-align: center; 
 
    display: none; 
 
} 
 

 
.leftAlign:hover + .summaryOverlay { 
 
    display: block; 
 
}

<div class="leftAlign" id="lastWish"> 
 
    <img class="summary" alt="the last wish" src="//placehold.it/100x100" /> 
 
</div> 
 
<div class="summaryOverlay"> 
 
    Geralt is a witcher. 
 
    <br><br> &nbsp;Yet he is no ordinary killer-for-hire. 
 
    <br><br> His sole purpose: to destroy the monsters that plague the world. 
 
    <br><br> But not everything monstrous-looking is evil and not everything fair is good. . . and in every fairy tale there is a grain of truth. 
 
</div>

Answer 2

Vous CSS est pas demandant au navigateur d'afficher la div en survolant l'image comme vous le vouliez. Il demande plutôt au navigateur d'afficher un enfant de .summary qui a une classe summaryOverlay. img ne peut jamais avoir un élément enfant, n'est-ce pas? Même s'il le pouvait, .summaryOverlay n'est pas son enfant. Donc, cela ne fonctionnera pas comme prévu. Essayez ceci:

#lastWish:hover + .summaryOverlay{ 
    display:block; 
} 

En excluant les problèmes de spécificité CSS, cela devrait vous donner ce que vous voulez. Dites-moi comment ça se passe.