Divがホバーに表示されていませんか？

Question

私は画像の上にマウスを置くと、divを表示するようにしています。残念なことに、私はそれを行うことができません、そして、私はなぜそれが動作していないのか迷っています。ここで

は私のコードです：

.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

あなたはここに述べたように.summaryOverlayは、.summaryの子ではありませんので：

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

ですから、.leftAlignでホバリングする必要があります（.summaryの親）はです210兄弟は、それがadjacent sibling selector +

注使用するために必要な：インラインスタイルを削除し、彼らは

.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

あなたCSSがではありませんそれらを使用することは悪い習慣ですは、あなたが意図したように画像の上にホバリングするときにdivを表示するようブラウザに要求します。むしろ、子の.summaryのクラスがsummaryOverlayであるようにブラウザに要求しています。 imgは子要素を持つことはできません。可能であれば、.summaryOverlayはその子ではありません。だから、あなたが意図したとおりに動作しません。これを試してみてください：

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

CSSの特定の問題を除いて、必要なものを与えてください。それがどうなるか教えてください。