javascript - facebook 喜欢 popover 的例子

Question

当您将鼠标悬停在显示弹出窗口的用户图片上时，我正在尝试制作 facebook 样式的用户信息。但打开图片下方空白区域的用户信息。我只需将鼠标指向要打开弹出窗口的用户照片和姓名。

我的 DEMO例子

这是我的 CSS 代码:

#hover {
    padding: 10px;
    position: relative;
    width:50px;
    float:left;
    left: 50px;
    top: 25px;
    height:0px;
}
#hover:hover {
    width:180px;
    cursor:pointer;
    float:left;
}
#popup {
    opacity: 0;
    position: relative;
    top: 60px;
    background: #f7f7f7;
    border: 1px solid transparent;
    border-radius: 0px;
    -moz-box-shadow:2px 3px 6px #888;
    -webkit-box-shadow: 2px 3px 6px #888;
    box-shadow: 2px 3px 6px #888;
    z-index: 999999;
    width:369px;
}
#hover:hover #popup {
    opacity: 1;
    border: 1px solid #eeeeee;
}
.popup-arrow-border {
    border-color: transparent transparent #2c3a6b transparent;
    border-style: solid;
    border-width: 10px;
    height:0;
    width:0;
    position:absolute;
    top:-8%;
    left:15px;
}
.popup-arrow {
    border-color: transparent transparent #2c3a6b transparent;
    background-color:transparent transparent #2c3a6b transparent;
    border-style: solid;
    border-width: 10px;
    height:0;
    width:0;
    position:absolute;
    top:-8%;
    left:15px;
}
.user-logo {
    display: block;
    float:left;
    position:absolute;
}
.user-name {
    left:70px;
    position: absolute;
    font-weight:bolder;
    font-family:sans-serif;
    font-size:1em;
}
a {
    text-decoration:none;
}
.text {
    margin-left: 200px;
    margin-top: 20px;
    font-weight:bold;
    color:black;
    font-size:1.2em;
}

还有HTML代码:

<div class="text">Hover your mouse over the image or text below</div>
<div id="hover">
    <div class="user-logo"> <a href="#"><img src="https://scontent-a-fra.xx.fbcdn.net/hphotos-ash3/t1/1959595_793389784022662_686223499_n.jpg" alt="facebook user icon" width="50px" height="50px" /></a>

    </div>
    <div class="user-name"> <a href="#">Techglimpse.com</a>

    </div>
    <div id="popup">
        <img src="https://fbcdn-sphotos-a-a.akamaihd.net/hphotos-ak-ash3/t1/1497719_793389800689327_525238023_n.jpg" />
        <div class="popup-arrow-border"></div>
        <div class="popup-arrow"></div>
    </div>
</div>

Answer 1

opacity: 0 表示图像显示，但不可见 - 图像仍然存在!因为它是 #hover div 的一部分，将鼠标悬停在图像上会使它再次变得透明!

因此，使用 display: none 而不是 opacity: 0 和 display: block 而不是 opacity: 1.

工作 fiddle .我为所有内容添加了边框，以帮助您更好地形象化它。