CSS3父母的可见性：悬停过渡隐藏孩子的可见性：延迟后可见过渡

Question

在下面提供一个示例 jsfiddle，我想通过 CSS3 悬停过渡使父 div 不可见，同时使子 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:hover，为过渡添加了“轻松”。

删除最后一个 .yellow:hover 块可以解决它，但会留下纯绿色块而不是较暗的块。

.yellow:hover { visibility: hidden; }

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

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