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;财产不能徘徊.所以你需要像这样触发父节点上的悬停事件:

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

DEMO