CSS nested div:hover does not work

Vote count:

0

Intention:

• a div with a pretty picture and title


• when the visitor hovers over the div, the pretty stuff is replaced by a descriptive text


• a CSS-only solution

simple, right?

Here's what I am trying:

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

Why is this not working?

When I view the page in Chrome and go about it with the inspector, switch on the :hover state on the "drueber" element, it works as expected. But when I actually hover over the div, nothing happens.

asked 1 min ago

Swiss Mister

104

CSS nested div:hover does not work