Question

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

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

当我鼠标悬停测试时，弹出窗口将打开，鼠标输出将隐藏。

但是在鼠标悬停和鼠标移除后，.test:hover>div仍然保留而不是隐藏。当我检查元素时，.test:hover>div即使在.test的鼠标输出后仍然有效。

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

Answer 1

我做了一个示例并显示：none不是一个好的ideia，因为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/

h：over之后css样式没有回归

1 个答案: