html - CSS3 parent 的可见性 : hover transition hides child's visibility:visible transition after a delay

Question

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

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

展示不仅仅是用文字来解释，所以这里有一个例子: http://jsfiddle.net/4LgG6/

在上面的示例中，当您将鼠标悬停在其上时，应该会出现绿色的半透明子 div，而黄色的父 div 应该会消失。我将绿色的 div 设为半透明，这样你会看到更深的黑绿色，因为背景是黑色的；而不是黄绿色，因为黄色 parent 是不可见的。

在完全变黑之前，它似乎部分起作用，而且只起作用了几秒钟。将鼠标悬停在鼠标上会让绿色再次可见，但只会再次出现几秒钟。

我用 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 block 可以解决它，但留下纯绿色 block 而不是较暗的 block 。

.yellow:hover { 可见性:隐藏； }

更新 fiddle :http://jsfiddle.net/4LgG6/6/

简单地将 visibility: visible; 添加到 .green