Question

在下面提供一个示例jsfiddle，我想让一个父div在与CSS3悬停转换可见的子div同时不可见。但是当我这样做时，过渡结束后，孩子div消失了。

当移动鼠标时，仍然在子div上，它再次出现，只是在几秒后重新消失。

显示不只是用文字解释，所以这是一个例子： http://jsfiddle.net/4LgG6/

在上面的示例中，当您将鼠标悬停在黄色父div上时，应显示绿色半透明子div。我做了绿色div半透明，所以你会看到一个更深的黑绿色，因为背景是黑色的;而不是黄色的绿色，因为黄色的父母是看不见的。

在完全变黑之前，它似乎只能工作几秒钟。将光标移动到悬停上可以让绿色再次可见，但只能再次显示几秒钟。

我使用Safari，Chrome和Opera进行了测试，并且都给出了问题。

任何帮助？

这是html：

<div class="bg">
    <div class="yellow">
         <div class="green"></div>
    </div>
</div>

这就是css：

.bg {
    background: #111;
    height:200px;
}
.green {
    display: block;
    width: 100px;
    height: 100px;
    background-color: green;
    -webkit-transition: all 2s;
    transition: all 2s;
    opacity:0;
}
.yellow {
    display: block;
    width: 100px;
    height: 100px;
    position: absolute;
    background-color: yellow;
    visibility: visible;
    -webkit-transition: all 2s;
    transition: all 2s;
 }
.yellow:hover .green {
    opacity:0.5;
}
.yellow:hover {
     visibility: hidden;
}

Answer 1

这是你要去的吗？ http://jsfiddle.net/4LgG6/5/ 删除了.yellow：悬停，添加＆＃34;轻松＆＃34;过渡。

删除最后一个.yellow：悬停块是解决它的原因，但是留下了普通的绿色块而不是更暗的块。

.yellow:hover { visibility: hidden; }

更新了小提琴：http://jsfiddle.net/4LgG6/6/

只需将visibility: visible;添加到.green

即可

CSS3父级的可见性：悬停转换隐藏了孩子的可见性：延迟后的可见转换

1 个答案: