Question

当您将鼠标悬停在显示popover的用户图片上时，我正在尝试制作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。我已经为所有内容添加了边框，以帮助您更好地将其可视化。

Answer 2

我回答我的问题。 Facebook用户在打开的弹出窗口中用鼠标在图片上共享点。当用户打开它时，同时用鼠标点击popover的名称.Facebook用ajax完成了它。我做了一些研究，却找不到任何关于它的信息。我试着用css做。我的工作第一次出现问题我不明白。但是我的朋友在这里帮了我当我设法做的时候，当用户名和用鼠标停留在弹出窗口上时，我点了我的工作来开发这一点。这是 DEMO CODEPEN

我将在这里给出所有css和html代码

HTML CODE：

<div class="container">
<div class="hovercard1">
  <div class="user-logo"><img src="https://scontent-b-ams.xx.fbcdn.net/hphotos-frc1/t1/1780641_780166082011699_1924260798_n.jpg" width="50px" height="50px"></div>
  <div class="popup">
    <img src="https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-prn1/t1/1925141_793563057338668_302044989_n.jpg"/>
    <div class="popuup-arrow-border"></div>
    <div class="popup-arrow"></div>

  </div>
</div>
  <div class="test">
  <div class="hovercard2">
  <div class="user-name">Mustafa Öztürk</div>
    <div class="popup2">
    <img src="https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-prn1/t1/1925141_793563057338668_302044989_n.jpg"/>
    <div class="popuup-arrow-border2"></div>
    <div class="popup-arrow2"></div>

  </div>
  </div>
  </div>
</div>

CSS 代码在这里：

.hovercard1{
  float:left;
  width:50px;
  height:50px;

}
.hovercard1:hover {
 width:50px;
  height:auto;
  cursor:pointer; 
}
.popup {
 display:none; 
 position:relative;
 top:60px;
 border-radius:3px;
  -webkit-border-radius:3px;
  -mox-border-radius:3px;
  -o-border-radius:3px;
  -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;
}
.hovercard1:hover .popup{
 display:block;
}
.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;
}
-------------------------------
.hovercard2{
  float:left;
  width:280px;
  height:auto;

}
.hovercard2:hover {
 width:280px;
  height:auto;
  cursor:pointer; 

}
.popup2 {
 display:none; 
 position:relative;
  margin-left:15px;
 top:30px;
 border-radius:3px;
  -webkit-border-radius:3px;
  -mox-border-radius:3px;
  -o-border-radius:3px;
  -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;

}
.hovercard2:hover .popup2{
 display:block;
}
.popup-arrow-border2 {
    border-color: transparent transparent #2c3a6b transparent;
    border-style: solid;
    border-width: 10px;
    height:0;
    width:0;
    position:absolute;
    top:-20px;
    left:15px;
}
.popup-arrow2 {
    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:-20px;
    left:15px;
}
.test{
 float:left;
  width:180px;
  height:20px;


}

facebook就像popover的例子

2 个答案: