懸停時不顯示 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兄弟，你需要使用相鄰的兄弟選擇器+

注意：刪除內聯樣式，使用它們是一種不好的做法

 .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 特性問題，否則它應該能滿足您的需求。 讓我知道事情的后續。