Question

朋友您好我的鼠标悬停在div上有问题。

我已经从 codepen.io

创建了 DEMO

因此，当您将鼠标悬停在图像上时，您可以在此演示中看到气泡将会显示。但泡沫似乎没有出现。

以下是 HTML 代码：

<div class="container"
<div class="present_wrp">
<div class="wo_wrp2 wo-wrp2">
  <div class="wo_content2">
      <div class="ornekoto"><img src="http://cdn.flaticon.com/png/256/26625.png" width="267" height="250" /><div class="ornot"></div></div>
  </div>
</div>

</div>
</div>

和 CSS 代码：

.container {
  margin:0px auto;
  width:500px;
  height:500px;
  margin-top:100px;
}
.wo_wrp *:last-child {
    margin-bottom: 0;
}

.wo-wrp2 {
    float: left;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
position: relative;
width: 300px;

}

.wo_content2 {
    background: none repeat scroll 0 0 #FFFFFF;
    background-color: #fff;
    padding: 15px;
    position: relative;
    z-index: 1;
    overflow:hidden;
    border: 1px solid #97a8bb;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -o-border-radius: 3px;
    -moz-border-radius:3px;
}
.wo_content_t2 {
    background: none repeat scroll 0 0 #FFFFFF;
    background-color: #fff;
    padding:5px;
    position: relative;
    z-index: 1;
    overflow:hidden;
    border: 1px solid #97a8bb;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -o-border-radius: 3px;
    -moz-border-radius:3px;
}
.wo-wrp2:after {
    border-radius: 0 0 50% 50% / 0 0 20px 20px;
    bottom: 0;
    box-shadow: 0 10px 10px rgba(113, 145, 182, 0.5);
    content: "";
    height: 20px;
    left: 10px;
    position: absolute;
    right: 10px;

}
.ornekoto{
    float:left;
    width:267px;
    height:250px;
    background-color:#307cdc;
    border-radius:3px;
    -webkit-border-radius:3px;
    -o-border-radius:3px;
    -o-border-radius:3px
    }
.ornot 
{
position: absolute;
width: 400px;
height: 500px;
padding: 0px;
background: #307cdc;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
display:none;
margin-top:-755px;
}

.ornot:after 
{
content: '';
position: absolute;
border-style: solid;
border-width: 15px 15px 0;
border-color: #307cdc transparent;
display: block;
width: 0;
z-index: 1;
bottom: -15px;
left: 58px;
}
.ornekoto:hover .ornot{
    display:block;
    }

Answer 1

问题在于您设置了overflow:hidden;。如果你将它换成一个clearfix，它将正常工作。

隐藏溢出是保持容器的高度，因此您需要首先向div添加一个clearfix（一个clearfix允许div保持浮动元素的高度）。

.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

接下来，您需要做的就是将其添加到周围的div：

<div class="wo_content2 cf">

然后删除溢出隐藏属性

.wo_content2{
    overflow:hidden;
}

在这里演示：

http://codepen.io/EightArmsHQ/pen/NPbKpz

Answer 2

您在overflow: hidden上设置了.wo_content2，这可以防止您的气泡从其父容器中弹出（因为隐藏了“溢出”）。请改用clearfix：

.wo_content2 {
   background: none repeat scroll 0 0 #FFFFFF;
   background-color: #fff;
   padding: 15px;
   position: relative;
   z-index: 1;
   /*overflow:hidden;*/ <---------- remove
   border: 1px solid #97a8bb;
   border-radius: 3px;
   -webkit-border-radius: 3px;
   -o-border-radius: 3px;
   -moz-border-radius:3px;
}

.wo_content2:after {
   content: '';
   display: block;
   clear: both;
}

CODEPEN

CSS悬停泡沫似乎没有出来

2 个答案:

在这里演示：