CSS嵌套div：hover不起作用

Question

意图：

• 一个漂亮的图片和标题的div
• 当访问者在div上盘旋时，漂亮的东西被描述性文本替换
• 仅限CSS的解决方案

简单，对吧？

这是我正在尝试的：

HTML：

<div class="drunter">
    I am below
    <div class="drueber">
        I am on top
    </div>
</div>

CSS：

.drunter {
    position:relative;
    background-color:#f00;
}
.drueber {
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    display:none;
    background-color:#00f;
}
.drueber:hover {
    display:block;
}

jsfiddle

为什么这不起作用？

当我在Chrome中查看该页面并使用检查器进行操作时，在“drueber”元素上打开：hover状态，它按预期工作。但是当我实际上将鼠标悬停在div上时，没有任何反应。

Answer 1

由于.drueber具有display:none;属性，因此无法悬停。{p>所以你需要像这样触发父节点上的悬停事件：

.drunter:hover .drueber {
    display:block;
}

<强> DEMO

Answer 2

.drunter {
    position:relative;
    background-color:#f00;
}
.drueber {
    display:none;
    background-color:#00f;
}
.drunter:hover .drueber {
    display:block !important;
}

我在css中做了一些改动试试这段代码。