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具体问题，它应该给你想要什么。让我知道事情的后续。