CSS nested div:hover does not work

Question

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.

It´s strange to hover st. what is hidden and have width=0, height=0 (so you can't hover that) :-) — pavel
– pavel, Commented Nov 19, 2014 at 9:52

web-tiki · Accepted Answer · 2014-11-19 09:50:55Z

9

As the .drueber has display:none; property it can't be hovered. so you need to trigger the hover event on the parent like this :

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

DEMO

answered Nov 19, 2014 at 9:50

web-tiki

104k33 gold badges226 silver badges258 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Swiss Mister Over a year ago

Wow! that was a fast one! can't set it as answer yet, but this is it! Thank you!

waqas · Accepted Answer · 2014-11-19 10:05:45Z

0

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

i make a little changes in css try this code.

answered Nov 19, 2014 at 10:05

waqas

34 bronze badges

1 Comment

Swiss Mister Over a year ago

Thanks waqas, but from what I can tell, this adds nothing to web-tikis answer, right? And I strongly dislike !important in my CSS code...

Collectives™ on Stack Overflow

CSS nested div:hover does not work

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related