Facebook喜欢Popover示例

Question

当您悬停在用户图片上时，我正在尝试制作Facebook样式用户信息。但是图片下方的空区域中的用户信息开放。我只是将鼠标指向用户的照片，名称要打开弹出声。

我的 demo 示例

这是我的 css kod：

#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。

工作小提琴。我已经在所有内容中添加了边界，以帮助您更好地可视化它。