css pseudoclass:hover not working

Question

I am struggling to get a simplest css hover pseudoclass to work. Anybody knows why the following doesnt work?

the css

#hidden {display:none;}
#show:hover #hidden{display:block;}

the html

<a href="#" id="show">show</a>
<div id="hidden">here i am</div>

I really feel stupid asking such a simple question, i did this a hunderd times, but cant figure out why this shouldnt work.

Answer 1

Try this

#show:hover + #hidden{display:block;}

:hover #hidden implies that #hidden is a child of the hover element. The + selector looks for the next adjacent sibling.