相关疑难解决方法(0)

我正在尝试制作一张悬停卡css.我有一个关于页面位置的问题.

我已经从codepen.io 创建了这个DEMO页面.因此,如果您位于演示页面的底部,那么您会看到气泡div显示出来.

我该怎么做才能.bubble在页面底部显示三角形？

.container{
  width:400px;
  height:400px;
  margin:0px auto;
  margin-top:50px;
}
.bubble 
{
position: absolute;
width: 250px;
height: 120px;
padding: 0px;
background: #000;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
  display:none;
}

.bubble:after 
{
content: '';
position: absolute;
border-style: solid;
border-width: 0 15px 15px;
border-color: #000 transparent;
display: block;
width: 0;
z-index: 1;
top: -15px;
left: 194px;
}
.hub:hover .bubble{
  display:block;
}
.wrp{
  width:300px;
  height:68px;
}