html - CSS nested div:hover does not work -
intention:
- a div pretty picture , title
- when visitor hovers on div, pretty stuff replaced descriptive text
- a css-only solution
simple, right?
here's trying:
html:
<div class="drunter"> below <div class="drueber"> 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; }
why not working?
when view page in chrome , go inspector, switch on :hover state on "drueber" element, works expected. when hover on div, nothing happens.
as .drueber
has display:none;
property can't hovered. need trigger hover event on parent :
.drunter:hover .drueber { display:block; }
Comments
Post a Comment