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的父母）這是.summaryOverlay的兄弟姐妹，你需要爲使用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具體問題，它應該給你想要什麼。讓我知道事情的後續。