css 悬停 div 可见性

Question

我有一个关于可见性的问题。我必须创建这个 DEMO 来自 fiddle 。

如果你点击我的演示你可以看到只有一张图片。当您将鼠标悬停在该图像上时，气泡将打开。但是，如果您将鼠标放在图像的左侧，空白气泡会再次打开。我该如何解决这个问题？

.balon 
{
    position: absolute;
    width: 345px;
    height: auto;
    padding: 3px;
    background: #FFFFFF;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    border: #d8dbdf solid 1px;
    -webkit-box-shadow: -1px 1px 1px 0px rgba(216, 219, 223, 0.52);
    -moz-box-shadow:    -1px 1px 1px 0px rgba(216, 219, 223, 0.52);
    box-shadow:         -1px 1px 1px 0px rgba(216, 219, 223, 0.52);
    visiblility: hidden;
    opacity:0;
    margin-left: -345px;
    z-index:5;
    -webkit-transition: all .3s ;
    -moz-transition: all .3s ;
    -ms-transition: all .3s ;
    -o-transition: all .3s ;
    transition: all .3s ;
}

.balon:after 
{
    content: '';
    position: absolute;
    border-style: solid;
    border-width: 10px 0 10px 10px;
    border-color: transparent #fff;
    display: block;
    width: 0;
    z-index: 1;
    right: -10px;
    top: 16px;  
}

.vizyon_bg:hover .balon
{
    opacity:1; 
    visibility:visible;
    z-index:5; 
    transition: opacity .5s linear .5s;
    -webkit-transition: opacity .5s linear .5s;
    -moz-transition: opacity .5s linear .5s;
    -ms-transition: opacity .5s linear .5s;
}

Answer 1

伙计，我找到了解决方案!只需替换你的 balon 的 CSS，你就完成了!你的 z-index 有误:

我已经为你创建了 JSFiddle! http://jsfiddle.net/9pgqc24c/

.balon 
{
position: absolute;
width: 345px;
z-index:-99999;
height: auto;
padding: 3px;
background: #FFFFFF;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
border: #d8dbdf solid 1px;
  -webkit-box-shadow: -1px 1px 1px 0px rgba(216, 219, 223, 0.52);
-moz-box-shadow:    -1px 1px 1px 0px rgba(216, 219, 223, 0.52);
box-shadow:         -1px 1px 1px 0px rgba(216, 219, 223, 0.52);
  visiblility:hidden;
  opacity:0;
  margin-left:-345px;
  z-index:-1;
  -webkit-transition: all .3s ;
        -moz-transition: all .3s ;
        -ms-transition: all .3s ;
        -o-transition: all .3s ;
        transition: all .3s ;
}