Question

我有一个关于可见性的问题。我必须从小提琴中创建 DEMO 。

如果您单击我的演示，您会看到有一个图像。当您将鼠标悬停在此图像上时，气泡将会打开。但是，如果您使用鼠标左侧的图像空白气泡再次打开。我该如何解决这个问题？

.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 ;
}

css悬停能见度输出div

1 个答案: