html - 如何创建鼠标悬停信息弹出窗口(就像鼠标悬停在 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;
    }