为什么悬停在包含另一个 div 的 div 上不起作用？

Question

我刚进入 html 大约 2 周，我想创建一些你悬停在上面的宝丽来，并且会出现一些关于 picture.I 的信息，我认为问题在于我包括了一个 div 在另一个 one.Also 我还没有任何用于在 html 中编写的程序；只是我的记事本:)

<style>
html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

.info{
position:fixed;
display:none;
align:center;
}
.polaroid {
  position: absolute;
  box-shadow: 5px 5px 5px 5px rgba(17, 17, 17, 0.35) ;
  padding: 7px;
  width:220px;
height:inherit;
  background-color:white;
  transition: 1s;
}
.polaroid:hover+ .info{display:block;}
</style>
<div class="polaroid">
<img src="https://katsosco.gr/media/images/products/images/2_MT_GlacierNP500px-200x200.jpg" align="center">
 <div class="info"><p>This is just some random information which should appear extending the polaroid when i hover over it</p>
</div>

</div>



</body>```

Answer 1

+ 是一个 sibling combinator，其中 select 是相邻的兄弟元素。

您需要 child combinator > 到 select .info 元素 .polaroid

.polaroid:hover > .info{
    display:block;
}

为什么悬停在包含另一个 div 的 div 上不起作用？

Why doesnt the hover work on a div that included another div?

html

css

class

hover