css 样式在 h:over 后没有设置

Question

在我的应用程序中，我有以下代码。

.test>div {
    display: none;
}
.test:hover>div {
    background-color: red;
    display: inline-block;
    z-index: 9999;
    height: 100px;
}

当我将鼠标悬停在测试时，会打开一个弹出窗口，而 mouseout 会隐藏它。

但是在 mouseover 和 mouseout 之后，.test:hover>div 仍然保留而不是隐藏。当我检查元素时，即使在鼠标移出 .test 之后，.test:hover>div 仍然处于活动状态。

CSS child selector (>) doesn't work with IE 在上面的链接中，css 选择器无法选择，但在这里它选择并且之后没有应用任何其他样式。 这在除 IE8 之外的所有浏览器中都可以正常工作。

Answer 1

我做了一个例子，显示：none 不是一个好主意，因为 div 已从 dom 中删除。 mozilla的解释：关闭元素的显示（对布局没有影响）；所有后代元素的显示也会关闭。文档呈现为好像该元素不存在。

然后我使用背景：透明到元素存在，但你可以尝试可见性。

这是我的 HTML：

<div class="test">
    <div></div>
</div>

还有我的 CSS：

.test{
    float:left;
    position:relative;
    width:100px;
    height:100px;
    border:solid 1px;
}

.test > div{
    float:left;
    position:relative;
    width:50px;
    height:50px;
    background-color:transparent;
}

.test > div:hover{

    background-color:red;
}

以及在 jsfiddle 工作的示例：https://jsfiddle.net/xukLc5h1/