如何创建鼠标悬停信息弹出窗口(如facebook中用户图片上的鼠标悬停)

Question

我希望用户信息像在Facebook上一样弹出。有关该问题的示例，请参见下图。谢谢https://drive.google.com/open?id=1KXRQk-arf256KakeGB-lCSkX0DsAt5wq

Answer 1

HTML:

<div class="wrapper">
<div>
Lorem ipsum dolor sit ames
</div>
<div class="popUp">
ames dolor sit amen.
</div>
</div>

CSS

.wrapper {
position: relative;
}
.wrapper:hover > .popUp {
display: block;
}
.popUp {
display: none;
position: absolute;
background: green;
color: white;
left: 120px;
padding: 32px;
}